安装 compression-webpack-plugin
建议安装v1.1.11版本,最新版本可能会报错
$ cnpm install compression-webpack-plugin@1.1.11 -D
更改配置文件
修改 /config/index.js
productionGzip: true,
修改 /build/webpack.prod.config.js
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]', // asset 改为 filename
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
最后重新构建项目
$ npm run build
可以看到构建后的项目 /static
中的静态资源目录中多了后缀 .gz
的压缩文件。
服务器开启gzip功能
我们服务器使用node的express,安装插件 compression
$ cnpm install compression -S
修改 app.js
文件,添加中间件
const compression = require('compression');
app.use(compression())
最后重启服务器,浏览页面可以看到加载的资源文件大小比之前明显减小了。