本文介绍了如何利用Vite3的构建选项进行项目打包优化，包括output.manualChunks创建自定义公共chunk，output.chunkFileNames、output.entryFileNames和output.assetFileNames对构建结果的命名进行定制，以减少HTTP请求，提高加载效率。
在没有配置构建工具的分包功能时，构建出来的文件将无比巨大且是独立的一个 js 和 css 文件（如下图），这样本地加载文件时会存在巨大的压力。
默认情况下，浏览器重复请求相同名称的静态资源时，会直接使用缓存的资源。利用这个机制，我们可以将不经常更新的代码单独打包成一个 JS 文件，这样就可以减少 HTTP 请求，同时降低服务器压力。
数字化管理平台
Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus
Vue权限系统案例
个人博客
Vite 官方文档 -> 构建选项 -> build.rollupOptions中这样描述：自定义底层的 Rollup打包配置。这与从 Rollup 配置文件导出的选项相同，并将与 Vite 的内部 Rollup 选项合并。查看 Rollup 选项文档获取更多细节。也就是说 Vite 底层已经集成了 Rollup 的一部分功能，我们直接配置即可。
我这里的 Rollup 相关配置如下（仅供参考）：
最低0.47元/天 解锁文章
扫一扫
2253
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
