在Vue项目中,打包生成的JS文件过大通常是由于多种因素造成的,包括但不限于第三方库过大、冗余代码、未压缩的资源等。下面是一些优化Vue项目打包后JS文件大小的常见方法:
1.代码分割 chunk
使用Webpack的代码分割功能,可以将代码分割成多个小的chunk,实现按需加载。
2.启用 Gzip/Brotli 压缩
打包时生成 Gzip 文件(需安装 compression-webpack-plugin
)
npm install compression-webpack-plugin --save-dev
npm install path --save-dev
在vue.config.js中配置
const path = require('path') // 引入path模块
const CompressionWebpackPlugin = require('compression-webpack-plugin');
module.exports = {
// 关闭生产环境sourceMap(减少50%+体积)
productionSourceMap: false,
configureWebpack: { // 配置webpack的字段。
//打包忽略第三方库
externals:envBoole ? cdn.externals : {},
// 开启代码分割
optimization: {
splitChunks: {
chunks: 'all',
minSize: 20000, // 最小chunk size 20KB
maxSize: 244000, // 超过244KB自动拆分
cacheGroups: {
vendor: {
test: /[\/]node_modules[\/]/,
name(module) {
// 提取node_modules中的包名作为chunk名
const packageName = module.context.match(/[\/]node_modules[\/](.*?)([\/]|$)/)[1];
// 兼容npm包名中的@符号
return `npm.${packageName.replace('@', '')}`;
},
priority: 10,
reuseExistingChunk: true,
},
// 拆分公共组件
common: {
name: 'common',
minChunks: 2,
priority: 5,
reuseExistingChunk: true
}
}
}
},
// 开启gzip压缩
plugins: [
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
})
]
},
}