create-react-app 打包开启 gzip 压缩

  • Z时代
  • 2024-01-10
  • 分类：综合

react

查看有哪些版本：

npm view compression-webpack-plugin versions

安装旧版本：

yarn add compression-webpack-plugin@5

修改webpack.config.js文件：

const CompressionPlugin = require('compression-webpack-plugin')
const isGzip = process.env.GENERATE_GZIP_FILE === 'true'
plugins: [
  // ...
  isEnvProduction && isGzip && new CompressionPlugin({
    filename: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$/,
    threshold: 10240, // 对超过10k的数据进行压缩
    minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
  })
]

node开启gzip：https://www.npmjs.com/package/compression

$ npm install compression

var compression = require('compression')
var express = require('express')
var app = express()
app.use(compression({ filter: shouldCompress }))
function shouldCompress (req, res) {
  if (req.headers['x-no-compression']) {
    // don't compress responses with this request header
    return false
  }
  // fallback to standard filter function
  return compression.filter(req, res)
}

基本原理

  1. 浏览器请求资源文件时会自动带一个Accept-Encoding的请求头告诉服务器支持的压缩编码类型

  2. 服务器配置开启gzip选项：

    接收客户端资源文件请求，查看请求头Content-encoding支持的压缩编码格式，如果是包含gzip那么
    在每次响应资源请求之前进行gzip编码压缩后再响应返回资源文件(在响应头会带上Content-encoding: gzip)

  3. 浏览器接收到响应后查看请求头是否带有Content-encoding:gzip，如果有进行对返回的资源文件进行解压缩然后再进行解析渲染

注意点

  • 低版本浏览器兼容性，服务器可以设置一些忽略规则忽略为浏览器

  • 媒体文件无需开启:图片、音乐和视频大多数都已压缩过了，HTML,CSS AND JAVARSCRIPT

  • CPU负载：压缩文件耗费CPU（服务器需要压缩文件、浏览器解压文件）

webpack优化

  • 如果你使用了webpack，那么可以借助CompressionWebpackPlugin插件来提前对文件进行Gzip压缩

  • 这样服务器查找到有与源文件同名的.gz文件就会直接读取，不会主动压缩，降低cpu负载，优化了服务器性能

以上是 create-react-app 打包开启 gzip 压缩 的全部内容， 来源链接： utcz.com/z/383998.html

回到顶部