多入口+vite+vue3预渲染方案
如果你的项目要求加载速度要快,我们如果使用传统的vue3+sfc模式去开发,因为只有一个根节点,空白页面加载出来之后js才回去加载组件渲染,这样页面总是有一个短暂的空白。我们这里不讨论服务器端ssr和预渲染方案,仅仅是为了满足比较极端的优化需求,在这种情况下我的这套方案就是一种比较好的解决方案。
1 首先说一下多入口配置
多入口配置也就是说将项目拆分成多个子项目,然后让后通过url跳转关联接起来。这种方案能在大型项目优化方面有一定的积极作用。
vite+vue3多入口配置:
版本信息:
"vue": "3.3.4"
"vite": "^5.4.8"
1.1 相关配置
//其他配置
build: {
rollupOptions: {
input: {
index: "index.html",
login: "login.html",
member: "member.html",
},
}
//其他配置
这里这个index也可以是main是必须的,只是项目启动的入口,但是打包时依然可以和其他文件打包在同一个目录下。
根目录下:
<