给你的站点开启静态压缩

上篇文章介绍了如何在 nginx 中开启 gzip 压缩，对于前端的项目，我们还可以利用静态压缩来提升 gzip 压缩的效率。

所谓的静态压缩，就是前端项目在构建的时候，对静态资源提前进行压缩，将项目部署到 nginx 之后，当 nginx 服务器接收到客户端请求时，如果请求的文件存在于服务器上，并且已经被压缩过，那么服务器将会直接返回压缩后的文件给客户端，而不需要重新压缩。

要在 nginx 上开启静态压缩很简单，通过添加如下配置即可：

gzip_static on;

不过，要想正常使用静态压缩，还需要满足以下条件：

1. 请求的文件必须存在于服务器上，并且已经被压缩过。
2. 请求的文件名必须以 .gz 结尾。

例如，假设有一个名为 index.html 的文件，已经被 gzip 压缩过，那么我们可以将压缩后的文件保存为 index.html.gz 部署到 nginx 上，那么，当客户端请求 index.html 时，nginx 会检查是否存在 index.html.gz 文件，如果存在，则直接返回该文件，而不需要重新压缩。

对于前端项目而言，我们可以借助于 compression-webpack-plugin 这个 webpack 插件来实现静态压缩，该插件会在构建时，对静态资源进行压缩，并将压缩后的文件保存为 .gz 结尾的文件。

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin({
      // 压缩算法
      algorithm: 'gzip',
      // 压缩文件类型为 js、css、html
      test: /\.(js|css|html)$/,
      // 压缩阈值
      threshold: 10240,
      // 压缩比例
      minRatio: 0.8,
      // 不删除原始文件
      deleteOriginalAssets: false,
    }),
  ],
};