第一步：找到config文件夹下的index.js文件，将productionGzip改为true，开启gzip压缩。
index.png
第二步：安装依赖 compression-webpack-plugin
npm install --save-dev compression-webpack-plugin
第三步: 找到build文件夹下的webpack.prod.conf.js文件，配置gzip
js.png
代码如下
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
注意：如果执行npm run build报错，需要执行一下命令。
- 卸载已经安装的最新版2.0 compression-webpack-plugin 安装包。
npm uninstall --save-dev compression-webpack-plugin
- 重新安装1.1.12版本(该版本为1.1的最新版)。卸载其实可以不用，直接执行安装命令，进行版本覆盖也行。
npm install --save-dev compression-webpack-plugin@1.1.12
这样就完成前端的工作了，但开启gzip压缩还需要后端配合
后台开启gzip——nginx开启gzip
http {
gzip on; #开启或关闭gzip on off
gzip_disable "msie6"; #不使用gzip IE6
gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
gzip_buffers 4 16k; #buffer 不用修改
gzip_comp_level 3; #压缩级别:1-10，数字越大压缩的越好，时间也越长
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # 压缩文件类型
gzip_vary off; #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"
}
