先是入口点 main.js
import App from './components/App.vue'
router.start(App, '#app')
然后在App.vue 也就是根组件里面声明router-view
<router-view class="view" keep-alive transition transition-mode="out-in"> </router-view>
年前开始负责新项目开发，是一个h5内嵌到企业微信。技术栈是 vite2.x + vue3.x 。随着业务的开展，版本迭代，页面越来越多，第三方依赖也越来越多，打出来的包也越来越大。针对这个问题，很容易就会想到分包这个解决方案。根据 vite 官方文档 提示，做了 vendor 分包之外，还对路由引用的组件做了异步加载处理，也会产生独立分包。这种配置在某个阶段是没问题的。 经过阅读源码，以及官方文档，分析了vite和rollup的分包策略，最后得出这个解决方案： 下面来看看当时是如何分析，以及一步一步来揭开默认分包策略的神秘面纱。 经过测试，在 vite 配置文件，通过 build.rollupOptions.output.manualChunks 配合手动分包策略之后，不会自动生成vendor包。想要知道更清晰 vite 在什么情况会分 vendor 包，什么时候不会分 vendor 包，需要打开源码看清楚。 小结：用户配置了手动分包，就会忽略 vite 提供的 vendor 分包逻辑。 那如果希望在手动分包的基础上还需要 vendor 分包，那么就需要把 vendor 分包的逻辑抄过去就可以了。 备注： 为什么会产生 chunk碎片 ？参考对 webpack 分包的理解，除了入口点（静态入口点、动态入口点）单独生成一个chunk之外，当一个模块被两个或以上的 chunk 引用，这个模块需要单独生成一个 chunk 。 下面从源码的角度看看 rollup 是如何生成这些 chunk碎片 的。 下面来看看 getChunkAssignments 做了什么。 小结： 下面看看通过 createChunks 是如何进行默认分包的 对于生成 chunk签名 ，举个具体点的例子， allEntryPoints 包括一个静态入口点 index.html ，两个动态入口点： Hello.vue 和 World.vue 。有一个模块 sdkUtils.js 的入口点为 Hello.vue （即被 Hello.vue 导入）；有一个模块 api.js 的入口点为 Hello.vue 以及 World.vue ；有一个模块 log.js 依赖了 Hello.vue 、 World.vue 和 index.html 。 所以，这个例子中，会产生6个chunk，且 api.js 对应的 chunk 和 log.js 对应的 chunk 就是额外多出来的chunk。 小结：Document
Document接口表示在浏览器中加载的任何网页，并作为到网页内容的入口点，这是 DOM 树。 DOM树包括诸如<body>和 <table>之类的元素，其他等等。其也为文档（document）提供了全局性的函数，例如获取页面的URL、在文档中创建新的 element 的函数。它为文档提供全局的函数，像如何获取页面的URL和在文档中创建新的元素。
这里主要用于Document的两个方法
1、 document.getElementById
返回一个匹配特定 ID的元素
<script>function changeColor(newColor) {
var elem = document.getElementById("para1")
elem.style.color = newColor
}
</script>
</head>
<body>
<p id="para1">Some text here</p>
</body>
新手注意：
新手要注意方法名中 'Id' 的拼写——'getElementByID' 是没有作用的。许多人会忽视这个错误。
如果没有查找到对应的元素，方法会返回null。注意ID参数是大小写敏感的，所以document.getElementById("Main")无法获取到元素<div id="main">，因为'M'和'm'是不一样的。
2、Document.getElementsByClassName()
返回一个类似数组的对象，包含了所有指定 class 名称的子元素。
document.getElementsByClassName('test') //获取所有class为'test'的元素document.getElementsByClassName('red test') //获取所有class同时包括'red'和'test'的元素
