给你的站点开启静态压缩

上篇文章介绍了如何在 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,
    }),
  ],
};
如果您觉得本文对您有用,欢迎捐赠或留言~
微信支付
支付宝

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注