写作不易，未经作者允许禁止以任何形式转载！
如果觉得文章不错，欢迎关注、点赞和分享！

[打包优化]Webpack 体积压缩 (juejin.cn)

HTTP 压缩

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

  • HTTP 压缩的流程什么呢?

    • 第一步:HTTP 数据在服务器发送前就已经被压缩了;(可以在 webpack 中完成)
    • 第二步:兼容的浏览器在向服务器发送请求时，会告知服务器自己支持哪些压缩格式;
    • 第三步:服务器在浏览器支持的压缩格式下，直接返回对应的压缩后的文件，并且在响应头中告知浏览器;

压缩格式

  1. compress – UNIX 的“compress”程序的方法(历史性原因，不推荐大多数应用使用，应该使用 gzip 或

    deflate);

  2. deflate – 基于 deflate 算法(定义于 RFC 1951)的压缩，使用 zlib 数据格式封装;

  3. gzip – GNU zip 格式(定义于 RFC 1952)，是目前使用比较广泛的压缩算法;

  4. br – 一种新的开源压缩算法，专为 HTTP 内容的编码而设计;

Webpack 对文件压缩

使用 CompressionPlugin 对文件进行压缩

  • 安装

    • npm install compression-webpack-plugin

  • webpack.prod.js

    • threshold：x 以上的文件才进行压缩
    • minRatio：最小压缩比，小于则不压缩
    • test：正则匹配的文件才压缩
    • alogorithm：压缩算法
const CompressionPlugin = require('compression-webpack-plugin');

plugins: [
  new CompressionPlugin({
    threshold: 0,
    minRatio: 0.6,
    test: /\.(css|js)/i,
    algorithm: 'gzip',
  }),
];

HTML 文件中代码的压缩

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

  • inject:设置打包的资源插入的位置

    • true、 false 、body、head

  • cache:设置为 true，只有当文件改变时，才会生成新的文件(默认值也是 true)

  • minify:默认会使用一个插件 html-minifier-terser

  • webpack.prod.js

plugins: [
  new HtmlWebpackPlugin({
    title: 'LeBronChao Webpack',
    template: './src/index.html',
    inject: 'body',
    cache: true,
    minify: isProduction
      ? {
          removeComments: true, // 是否删除注释
          removeRedundantAttributes: true, // 是否删除多余（默认）属性
          removeEmptyAttributes: true, // 是否删除空属性
          collapseWhitespace: false, // 折叠空格
          removeStyleLinkTypeAttributes: true, // 比如link中的type="text/css"
          minifyCSS: true, // 是否压缩style标签内的css
          minifyJS: {
            // 压缩JS选项，可参考Terser配置
            mangle: {
              toplevel: true,
            },
          },
        }
      : false,
  }),
];

InlineChunkHtmlPlugin

  • 另外有一个插件，可以辅助将一些 chunk 出来的模块，内联到 html 中:

    • 比如 runtime 的代码，代码量不大，但是是必须加载的;
    • 那么可以直接内联到 html 中;

  • 这个插件是在 react-dev-utils 中实现的，所以我们可以安装一下:

    • npm i react-dev-utils

  • 在 production 的 plugins 中进行配置（内联 runtime 文件）:

    • webpack.prod.js
    • 参数一为 HtmlWebpackPlugin
    • 参数二为正则匹配表达式
const InlieChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');

plugins: [new InlieChunkHtmlPlugin(HtmlWebpackPlugin, [/runtime.+\.js/])];

Terser

  • 什么是 Terser 呢?

    • Terser 是一个 JavaScript 的解释(Parser)、Mangler(绞肉机)/Compressor(压缩机)的工具集;
    • 早期会使用 uglify-js 来压缩、丑化 JavaScript 代码，但是目前已经不再维护，并且不支持 ES6+的 语法;
    • Terser 是从 uglify-es fork 过来的，并且保留它原来的大部分 API 以及适配 uglify-es 和 uglify-js@3 等; 也就是说，Terser 可以帮助压缩、丑化代码，让我们的 bundle 变得更小。

  • 因为 Terser 是一个独立的工具，所以它可以单独安装:

    • npm i terser -g

  • 可以在命令行中使用 Terser

Webpack 中配置 Terser

  • 首先，需要打开 minimize，让其对代码进行压缩(默认 production 模式下已经打开了)

  • 其次，可以在 minimizer 创建一个 TerserPlugin:

    • extractComments:默认值为 true，表示会将注释抽取到一个单独的文件中;
      • 在开发中，不希望保留这个注释时，可以设置为 false;
    • parallel:使用多进程并发运行提高构建的速度，默认值是 true，并发运行的默认数量: os.cpus().length - 1;
      • 也可以设置自己的个数，但是使用默认值即可;
    • terserOptions:设置 terser 相关的配置
      • compress:设置压缩相关的选项;
      • mangle:设置丑化相关的选项，可以直接设置为 true;
      • toplevel:底层变量是否进行转换;
      • keep_classnames:保留类的名称;

CSS 压缩

  • 另一个代码的压缩是 CSS:

    • CSS 压缩通常是去除无用的空格等，因为很难去修改选择器、属性的名称、值等;
    • CSS 的压缩我们可以使用另外一个插件:css-minimizer-webpack-plugin;
    • css-minimizer-webpack-plugin 是使用 cssnano 工具来优化、压缩 CSS(也可以单独使用);

  • 安装 css-minimizer-webpack-plugin:

    • npm i css-minimizer-webpack-plugin

  • 在 optimization.minimizer 中配置

配置示例

  • webpack.prod.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const isProduction = true;
const TerserPlugin = require('terser-webpack-plugin');
const CssMiniMizerPlugin = require('css-minimizer-webpack-plugin');
module.exports = {
  mode: 'production',
  optimization: {
    chunkIds: 'deterministic',
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: true,
        parallel: true,
        terserOptions: {
          compress: true,
          mangle: true,
          toplevel: false,
          keep_classnames: false,
        },
      }),
      new CssMiniMizerPlugin({
        parallel: true,
      }),
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: 'public',
          // 可不写，默认到output
          to: '',
          globOptions: {
            ignore: ['**/index.html', '**/.DS_Store', '**/abc.txt'],
          },
        },
      ],
    }),
  ],
};

[打包优化]Webpack 体积压缩 (juejin.cn)

掘金：前端 LeBron

知乎：前端 LeBron

持续分享技术博文，关注微信公众号 👇🏻

img