1、打包优化 (如果项目比较杂,插件用的比较多,这种方式就很有效果)
cacheGroups 公共代码抽离,根据当前项目使用的插件进行分类打包
module.exports = {
// 公共代码抽离
configureWebpack: config => {
config.optimization = {
splitChunks: {
chunks: 'all',
maxInitialRequests: 5,
automaticNameDelimiter: '-',
name: true,
cacheGroups: {
'element-ui': {
name: 'element-ui',
test: /[\\/]node_modules[\\/]_?element-ui(.*)/,
priority: -10,
},
'vue-amap': {
test: /[\\/]node_modules[\\/]_?vue-amap(.*)/,
name: 'vue-amap-vendor',
priority: -10,
},
vendors: {
name: 'chunk-vendor',
test: /[\\/]node_modules[\\/]/,
priority: -15,
},
tinymce: {
name: 'chunk-tinymce',
test: /[\\/]node_modules[\\/]_?tinymce(.*)/,
priority: -10,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
};
},
pages: {
index: {
entry: 'src/main.js',
template: 'public/index.html',
filename: 'index.html',
chunks: ['element-ui', 'vue-amap-vendor', 'chunk-vendor', 'index', 'chunk-tinymce'],
},
},
};
上面的page里面 的chunks 一定不要忘记添加上去,这个就是打包后要引入的test值,否则项目都启动不了。
这是打包后的结果
2、打包后gzip 压缩js。发布后并配置nginx。(nginx单独配置也可以实现gzip压缩,这里是减轻nginx 负担)
const CompressionPlugin = require('compression-webpack-plugin'); // 开启zip压缩
module.exports = {
// 公共代码抽离
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 判断是否生产环境的
return {
plugins: [
new CompressionPlugin({
test: /\.js$|\.html$|\.css$/,
threshold: 10240, // 超过10K就压缩, 否则还比原来大
deleteOriginalAssets: false, // false保留源文件(.js)
}),
],
};
}
},
}
打包完成后发布
nginx 增加相关配置(具体可以参考nginx 配置参数)
# 开启gzip
gzip on;# 启用gzip压缩的最小文件;小于设置值的文件将不会被压缩
gzip_min_length 1k;# gzip 压缩级别 1-10
gzip_comp_level 2;# 进行压缩的文件类型。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding,建议开启
gzip_vary on;
见证差距的时候到了:
此时我们项目的优化已经提升 60%以上,这样的优化比那些挤牙膏式強的太多了