vite2|vite2 打包的时候vendor-xxx.js文件过大的解决方法
vite2是一个非常好用的工具,只是随着代码的增多,打包的时候 vendor-xxxxxx.js 文件也越来越大,这就郁闷了。
打包时遇到警告
输出文件名字/static/vendor.9b5698e4.js 806.03kb / brotli: skipped (large chunk)
【vite2|vite2 打包的时候vendor-xxx.js文件过大的解决方法】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://blog.csdn.net/weixin_41277748/article/details/116431789
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
}
}
这几个可以分开打包,其他的遇到再说。
推荐阅读
- Keras速查_CPU和GPU的mnist预测训练_模型导出_模型导入再预测_导出onnx并预测
- 线程池开关与搭建的那些事
- 链路预测研究
- HamsterBear|HamsterBear 构建可启动的镜像(更新中)
- TypeScript基本类型有哪些
- —OpenCV|OpenCV-Python——第7章(图像的基本运算)
- 可视化|首次公开,用了三年的 pandas 速查表!
- 机器学习+深度学习数学基础|机器学习和深度学习之数学基础-线性代数 第四节 线性变换及其与矩阵的关系
- 微带线贴片天线尺寸的计算,利用Matlab计算+常见的RF计算在线公式
- matlab|matlab 双目立体视觉,基于MATLAB与OpenCV相结合的双目立体视觉测距系统