《十九》在 Webpack 中对文件进行 HTTP 压缩

原创已于 2023-12-08 08:51:02 修改 · 135 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Webpack

于 2023-11-01 17:33:43 首次发布

Webpack 专栏收录该内容

34 篇文章

订阅专栏

本文介绍了HTTP压缩在提高传输速度和带宽利用上的作用，涉及Webpack中的CompressionPlugin插件使用、常见压缩格式如gzip、deflate和br，以及如何在Webpack配置中设置压缩阈值和算法。

HTTP 压缩是一种内置在客户端和服务器之间的改进传输速度和带宽利用率的方式。

HTTP 压缩的流程为：

资源在给到服务器之前就被压缩好。

可以在 Webpack 中进行资源的压缩。
兼容的浏览器在向服务器发送请求时，通过请求头中 Accept-Encoding 告知服务器自己支持哪些压缩格式。
服务器接收到浏览器请求后，返回对应的压缩后的文件，并通过响应头的 Content-Encoding 告知浏览器。
浏览器接收到返回后的压缩文件，会自动对其进行解压、加载和执行。

HTTP 压缩常见的压缩格式有：compress（历史性原因，已不再推荐使用）、gzip（目前使用比较广泛）、deflate（目前使用也比较多）、br（一种新的开源压缩算法、专门为 HTTP 内容的编码而设计，但目前有些浏览器不支持）。

在 Webpack 中对文件进行 HTTP 压缩：

在 Webpack 中对文件进行 HTTP 压缩，是实现了 HTTP 压缩的第一步操作。可以通过 CompressionPlugin 插件来实现。

安装 CompressionPlugin 插件：npm install compression-webpack-plugin --save-dev。

新建 src/index.js 文件，并编写代码。

console.log('index')

const getNum = () => {
  console.log(10)
  return 10
}
const num = getNum()
console.log(num + 20)

const getStr = () => {
  console.log('Hello')
  return 'Hello'
}
const str = getStr()
console.log(str + 'World')

const getBool = () => {
  console.log(true)
  return true
}
const bool = getBool()
console.log(!bool)

在 webpack.config.js 配置文件中进行配置。
```
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    new CompressionPlugin(),
  ]
}
```
可以对 CompressionPlugin 插件进行配置。CompressionPlugin 接收一个对象作为参数，其中常见的属性有：
1. threshold：超过多大的文件才对其进行压缩。
2. minRatio：压缩的最小比率，只要达到了最小的压缩比率才进行压缩。
  
  压缩比率：压缩后文件大小除以源文件的代码。
3. test：匹配的规则，对匹配到的文件才进行压缩。
4. algorithm：要采用的压缩算法。
5. include：需要被压缩的文件。
6. exclude：不需要被压缩的文件。
运行 webpack 命令进行打包，会发生打包输出的文件都生成了对应 gzip 文件。