vite2打包的时候vendor-xxx.js文件过大的解决方法
更新时间：2022年03月20日 10:50:57 作者：金色海洋（jyk）
vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，本文主要介绍了vite2打包的时候vendor-xxx.js文件过大的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，这就郁闷了。
打包时遇到警告
输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk)
Some chunks are larger than 500kb after minification. Consider:
- Using dynamic import() to code-split the application
- Use build.rollupOptions.output.manualChunks to improve chunking: rollup.js
- Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
由于打包时有些依赖包体积过于庞大，提示你进行配置分割；
https://rollupjs.org/guide/en/#outputmanualchunks
寻找解决方案
（好吧，官网是英文的，看不懂）
于是到网上找了一下，发现了一种解决方法。https://www.jb51.net/article/241486.htm
module.exports = {
build: {
rollupOptions: {
output:{
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
}
}
}
}
}
尝试了一下，确实可以分成多个文件，但是问题又来了，分成的文件有大有小，大文件可以接受，但是一堆几k的小文件看着就烦了，于是又想了想，发现可以这样。
build: {
sourcemap: true,
outDir: 'distp', //指定输出路径
assetsDir: 'static/img/', // 指定生成静态资源的存放路径
rollupOptions: {
output: {
manualChunks(id) {
if (id.includes('node_modules')) {
const arr = id.toString().split('node_modules/')[1].split('/')
switch(arr[0]) {
case '@kangc':
case '@naturefw':
case '@popperjs':
case '@vue':
case 'axios':
case 'element-plus':
return '_' + arr[0]
break
default :
return '__vendor'
break
}
}
},
chunkFileNames: 'static/js1/[name]-[hash].js',
entryFileNames: 'static/js2/[name]-[hash].js',
assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
},
brotliSize: false, // 不统计
target: 'esnext',
minify: 'esbuild' // 混淆器，terser构建后文件体积更小
}
},
思路
按照模块分开打包，大模块独立打包，小模块合并打包，这样就不会出现一大堆小文件了。
补充
经过不断尝试发现，@kangc（@kangc/v-md-editor）也就是md的编辑器不能单独打包，会报错。
还有 axios 也不能单独打包，会报错。
if (id.includes('node_modules')) {
const arr = id.toString().split('node_modules/')[1].split('/')
switch(arr[0]) {
case '@naturefw': // 自然框架
case '@popperjs':
case '@vue':
case 'element-plus': // UI 库
case '@element-plus': // 图标
return '_' + arr[0]
break
default :
return '__vendor'
break
}
}
这几个可以分开打包，其他的遇到再说。
到此这篇关于vite2打包的时候vendor-xxx.js文件过大的解决方法的文章就介绍到这了,更多相关vite2打包vendor-xxx.js文件过大内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了解决Echarts 显示隐藏后宽度高度变小的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家介绍了vue.config.js的完整配置教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue :src 文件路径错误问题的简单解决方法，本文分步骤给大家介绍的非常详细，感兴趣的朋友跟随脚本之家小编一起学习吧2018-05-05
这篇文章主要介绍了Vue.js 中制作自定义选择组件的代码附演示demo,通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要介绍了详解Vue中watch对象内属性的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
这篇文章主要介绍了 详解在vue使用weixin-js-sdk常见使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要介绍了vue动态子组件的两种实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-09-09
这篇文章主要介绍了Element ui关闭el-dialog时如何清除数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要为大家介绍了vue利用openlayers实现动态轨迹，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了vue3封装Element导航菜单的实例代码,分为菜单数据格式示例,控制导航收缩的详细代码,本文通过实例代码介绍的非常详细,感兴趣的朋友跟随小编一起看看吧2024-03-03
最新评论