webpack优化 -- compression-webpack-plugin 开启gzip

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项目配置

1. 在config/index.js文件中修改productionGzip: true;

1. 在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"