1、安装压缩插件
npm install --save-dev compression-webpack-plugin@5.0.0
目前只能安装5.0左右的版本,如果安装7或者8的版本打包会报错
2、修改vue.config.js配置文件
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')//这个插件可以看官网还是很好用的
const productionGzipExtensions = ['js', 'css', 'woff']//对什么文件进行压缩
module.exports = {
//这里是自己的配置
configureWebpack: {
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),//该插件能够使得指定目录被忽略,从而使得打包变快,文件变小
// 下面是压缩打包插件的配置
new CompressionWebpackPlugin({
algorithm: 'gzip',//压缩算法
test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),//处理所有匹配此 {RegExp} 的资源
threshold: 10240,//只处理比这个值大的资源。按字节计算
minRatio: 0.8//只有压缩率比这个值小的资源才会被处理
}),
new webpack.optimize.LimitChunkCountPlugin({
maxChunks: 5, //控制打包生成js的个数
minChunkSize: 100
})
]
},
3、修改Nginx 配置
gzip on;
gzip_min_length 200;
gzip_buffers 32 4k;
gzip_http_version 1.1;
gzip_comp_level 6;
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/font-woff;
gzip_vary on;
nginx重新加载配置后,
访问资源证明已经生效了