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"