gzip 设置

1、nginx配置请参考

https://www.cnblogs.com/mengfangui/p/12165096.html

 

 

2、webpack配置

以vuecli脚手架为示例代码：

const CompressionPlugin = require('compression-webpack-plugin')
module.exports = {
  outputDir: 'dist',
  configureWebpack: {
    externals: {
      vue: 'Vue'
    },
    plugins: [
      new CompressionPlugin()
    ]
  }
}

说明需要安装：compression-webpack-plugin。

 

 

需要说明的是：

（1）webpack不配置gzip压缩，只有nginx配置也行，即nginx会压缩文件。

（2）给nginx配置：

gzip_static on;

同时webpack也配置了gzip压缩，nginx在返回文件时首先会查找静态资源有没有相关的gz文件，若存在返回gz文件，nginx不再压缩。

若没有找到文件，nginx压缩文件，这样会加重nginx的负担。

所以同时配置nginx和webpack会好一些。

同时缺点是：为了要兼容不支持gzip的浏览器，启用gzip_static模块就必须同时保留原始静态文件和gz文件。这样的话，在有大量静态文件的情况下，将会大大增加磁盘空间。