webpack优化 -- compression-webpack-plugin 开启gzip
打包的时候开启gzip可以大大减少体积,非常适合于上线部署。下面以vue-cli2.x项目为例,介绍如何在vue中开启gzip。?
步骤
安装 compression-webpack-plugin
注意,目前最新版需要运行在
webpack4.0
以上,如果你的webpack
是3.x版本的,请安装compression-webpack-plugin
的1.x版本(笔者安装的是1.1.12)。
npm install compression-webpack-plugin -D
改造vue项目配置
- 在
config/index.js
文件中修改productionGzip: true
;
- 在
build/webpack.prod.conf.js
文件中的plugins
添加下面的代码, vue-cli2.x默认已经写好了,则不用管
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
查看压缩前后的大小对比
如果想知道压缩前后的大小情况,可以使用
webpack-bundle-analyzer
插件,vue-cli2.x默认引进的不用管。然后在package.json
文件中添加下面的script命令:
"report":"npm run build --report=true"