原因:
加载慢的主要原因在于,构建后的chunk-vendors.js 文件过大,导致 初始化时间过长
优化前
有4.8MB
优化后
1.3MB 体积缩小了将近4倍 效果可想而知
好了 开始讲如何优化
第一步:
引入 webpack 、compression-webpack-plugin
ps: 一定要注意版本问题 webpack 和 compression-webpack-plugin 版本 过高和不兼容都会导致构建失败。
笔者这里使用的是下列版本
npm install --save-dev [email protected]
npm install --save-dev [email protected]
第二步:
1.配置vue.config.js
// 声明引入
const webpack = require('webpack');
const CompressionWebpackPlugin = require('compression-webpack-plugin') //引入插件
const productionGzipExtensions = ['js', 'css'] //压缩js 和css文件
// 在 module.exports = { 中配置
module.exports = {
configureWebpack: {
// webpack plugins
plugins: [
// Ignore all locale files of moment.js
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
// GitRevision.version()
// 配置压缩
new CompressionWebpackPlugin({
algorithm: 'gzip',
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
threshold: 10240,
minRatio: 0.8
}),
//maxChunks:使用大于或等于 1 的值,来限制 chunk 的最大数量。使用 1 防止添加任何其他额外的 chunk,这是因为entry/main chunk 也会包含在计数之中。
//minChunkSize: 设置 chunk 的最小大小。
//在合并 chunk 时,webpack 会尝试识别出具有重复模块的 chunk,并优先进行合并。任何模块都不会被合并到 entry chunk 中,以免影响初始页面加载时间。
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5,
minChunkSize: 100
})
],
},
}
2.npm run build 构建 (如出现报错请根据情况 自行解决)
控制台出现此类信息 代表压缩成功
第三步配置 nginx
在监听80的server中配置
gzip on;
gzip_min_length 1k;
gzip_comp_level 9;
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;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
结束 至此大功告成~