1. Nginx 打开 gzip 可以压缩文件，减少浏览器访问时需要下载的文件大小，从而加速网页打开

1
2
3
4
5
6
7
# 在 nginx.conf server 中添加下面的配置即可
gzip on;
gzip_buffers 32 4K;
gzip_comp_level 6;
gzip_min_length 100;
gzip_types application/javascript text/css text/xml;
gzip_vary on;

2. 由于这样压缩会占用服务器 cpu 资源，所以压缩可以由前端打包的时候来做

1
2
3
4
5
6
7
8
// webpack 中配置
const CompressionWebpackPlugin = require('compression-webpack-plugin')

new CompressionWebpackPlugin({
  test: /\.js$|\.html$|\.css$/,
  // 超过4kb压缩
  threshold: 4096
})
  • 这样就可以打包生成 .js 的同时，生成压缩后的相应文件 .js.gz，一并传到服务器
  • 虽然也可以只传 .gz 文件，但都上传更保险（为了要兼容不支持 gzip 的浏览器）

如果配合各类云使用

  1. build 之后上传至云
1
2
yarn build-prod
yarn upload-static
  1. 修改 webpack 中 output 路径
1
2
3
output: {
  publicPath: '//s.sls.upyun.net/asdf/',
},

Ngnix 中打开 gzip_static，就可以优先使用已有的压缩文件，不用 Nginx 再压缩

需要安装 ngx_http_gzip_static_module

1
gzip_static on; # 已有.gz文件则直接用，不需要再压缩

3. 项目中这么运用发现 gzip_static 不起作用

在配置完后，发现浏览器中返回的文件，带有 Content-Encoding: gzip 但大小和 Webpack 打包时的 .gz 文件不一致，猜想服务器返回的还是由 Nginx 压缩生成的文件。

原因是该项目中用了 proxy_pass 反代所以不支持 gzip_static

4. 就是只想上传 .gz 文件，不传原文件

安装 ngx_http_gunzip_module

1
2
# 在 nginx.conf 中打开
gunzip on;

即可不用上传压缩前的文件了

5. 这个优化体验下来并没有太大作用