15-压缩

什么是HTTP压缩

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

HTTP压缩的流程什么呢？

• HTTP数据在服务器发送前就已经被压缩了
• 兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式
• 服务器在浏览器支持的压缩格式下，直接返回对应的压缩后的文件，并且在响应头中告知浏览器

目前的压缩格式

• compress： UNIX的“compress”程序的方法
• deflate：基于deflate算法（定义于RFC 1951）的压缩，使用zlib数据格式封装；
• gzip：GNU zip格式（定义于RFC 1952），是目前使用比较广泛的压缩算法
• br：一种新的开源压缩算法，专为HTTP内容的编码而设计

Webpack对文件压缩

webpack中相当于是实现了HTTP压缩的第一步操作，我们可以使用CompressionPlugin。npm install compression-webpack-plugin

const CompressionPlugin = require('compression-webpack-plugin');
new CompressionPlugin({
  test: /\.(css|js)$/i,
  threshold: 0,
  minRatio: 0.8,
  algorithm: "gzip",
  // exclude
  // include
}),

HTML文件中代码的压缩

我们之前使用了HtmlWebpackPlugin插件来生成HTML的模板，事实上它还有一些其他的配置

• nject：设置打包的资源插入的位置：true、 false 、body、head
• cache：设置为true，只有当文件改变时，才会生成新的文件（默认值也是true）
• minify：默认会使用一个插件html-minifier-terser

new HtmlWebpackPlugin({
  template: "./index.html",
  // inject: "body"
  cache: true, // 当文件没有发生任何改变时, 直接使用之前的缓存
  minify: isProduction ? {
    removeComments: false, // 是否要移除注释
    removeRedundantAttributes: false, // 是否移除多余的属性
    removeEmptyAttributes: true, // 是否移除一些空属性
    collapseWhitespace: false,
    removeStyleLinkTypeAttributes: true,
    minifyCSS: true,
    minifyJS: {
      mangle: {
        toplevel: true
      }
    }
  }: false
}),