前端优化之开启 Gzip 压缩

Doyle

我其实一点也不懂,上网去查看别人都没写前端怎么做,就很郁闷。自己尝试一番才知道为何没人写前端的操作步骤,因为非常简单——生成 gz 文件,上传服务器即可。所以为了避免有人和我一样懵逼,索性记录下来以供参考。开门见山直接说操作方法:

我刚好用的是 vue boilerplate 来做开发,所以直接改配置就能做到压缩:

  1. 找到 config/index.js
  2. 找到 productionGzip: false
  3. 将 false 改为 true
  4. npm i -D compression-webpack-plugin
  5. 重新允许 npm run build
  6. 可以看到生成了一些 gz 文件
  7. 其他都不用变,把原来的代码和新生成的 gz 文件一并提交到服务器上就行了
  8. 找运维给服务器开启 gzip 即可

注:webpack.prod.conf.js 里应该要有以下这段代码:

if (config.build.productionGzip) {
  var CompressionWebpackPlugin = require('compression-webpack-plugin')

  webpackConfig.plugins.push(
    new CompressionWebpackPlugin({
      asset: '[path].gz[query]',
      algorithm: 'gzip',
      test: new RegExp(
        '\\.(' +
        config.build.productionGzipExtensions.join('|') +
        ')$'
      ),
      threshold: 10240,
      minRatio: 0.8
    })
  )
}
阅读 5.7k

Doyle
linuxer vimer

前端, angular, vue

844 声望
16 粉丝
0 条评论

前端, angular, vue

844 声望
16 粉丝
文章目录
宣传栏