第十一章 webpack5高级优化——减少代码体积

减少代码体积可用使得我们的项目在浏览器加载的时间更快，用户体验也更好。

1. treeShaking

MDN:

Tree shaking 是一个通常用于描述移除 JavaScript 上下文中的未引用代码 (dead-code) 行为的术语。

它依赖于 ES2015 中的 import 和 export 语句，用来检测代码模块是否被导出、导入，且被 JavaScript 文件使用。

在现代 JavaScript 应用程序中，我们使用模块打包 (如webpack或Rollup) 将多个 JavaScript 文件打包为单个文件时自动删除未引用的代码。这对于准备预备发布代码的工作非常重要，这样可以使最终文件具有简洁的结构和最小化大小。

开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。

如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。

这样将整个库都打包进来，体积就太大了。

案例说明：

文件名：src/math.js

export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

这里有两个函数一个是计算数的平方，一个是计算数的立方，它们都使用export语句导出了。

当我们只需要使用平方的这个函数的时候，我们使用import语法将它单独引入即可：

文件名：src/main.js

import {square} from './math'

console.log(square(6)) // 36

这个时候webpack的生产模式是默认开启treeShaking功能的，我们只需要执行打包命令即可

npm run build

观察dist目录下的bundle文件，并没有立方的函数代码。

在开发模式我们没有必要去开启这个功能，当然如果你感兴趣可以参考：webpack5-treeShaking文档

2. Babel

Babel文档

Babel为常见函数(如_extend)使用非常小的帮助程序。默认情况下，它将被添加到每个需要它的文件中。这种复制有时是不必要的，特别是当应用程序分布在多个文件中时。

这就是@babel/plugin-transform-runtime插件出现的地方:所有的helper都将引用@babel/runtime模块，以避免在编译输出中重复。运行时将被编译到您的构建中。

此转换器的另一个目的是为代码创建沙盒环境。如果你直接导入core-js或@babel/polyfill和它提供的内置程序，如Promise, Set和Map，这些将会污染全局作用域。虽然这对于应用程序或命令行工具来说是可以的，但如果你的代码是一个库，你打算发布给其他人使用，或者如果你不能准确地控制代码运行的环境，这就会成为一个问题。

转换器会将这些内置组件别名为core-js，这样你就可以无缝地使用它们，而不必需要polyfill。

你可以理解为将这些辅助代码作为一个独立模块，来避免重复引入。

• 安装依赖

npm i @babel/plugin-transform-runtime -D

• 配置插件

该插件需要在babel的loader中进行配置：

{
  loader: "babel-loader",
  options: {
    cacheDirectory: true, // 开启babel编译缓存
    cacheCompression: false, // 缓存文件不要压缩
    plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积
  },
},

3. ImageMinimizerWebpackPlugin

开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。

我们可以对图片进行压缩，减少图片体积。

注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。

• 安装依赖

npm i image-minimizer-webpack-plugin imagemin -D

还有剩下包需要下载，有两种模式（关于以下插件安装是一言难尽，成功渺茫）

1、无损压缩：

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D

2、有损压缩:

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D

具体区别可以参考：有损与无损的区别-百度百科

• 配置

如果你安装成功可以进行以下配置

const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
// ...
optimization: {
    minimizer: [
      // css压缩也可以写到optimization.minimizer里面，效果一样的
      new CssMinimizerPlugin(),
      // 当生产模式会默认开启TerserPlugin，但是我们需要进行其他配置，就要重新写了
      new TerserPlugin({
        parallel: threads, // 开启多进程
      }),
      // 压缩图片
      new ImageMinimizerPlugin({
        minimizer: {
          implementation: ImageMinimizerPlugin.imageminGenerate,
          options: {
            plugins: [
              ["gifsicle", { interlaced: true }],
              ["jpegtran", { progressive: true }],
              ["optipng", { optimizationLevel: 5 }],
              [
                "svgo",
                {
                  plugins: [
                    "preset-default",
                    "prefixIds",
                    {
                      name: "sortAttrs",
                      params: {
                        xmlnsOrder: "alphabetical",
                      },
                    },
                  ],
                },
              ],
            ],
          },
        },
      }),
    ],
  },

1. 打包时可能会出现报错：

Error: Error with 'src\images\1.jpeg': '"C:\Users\86176\Desktop\webpack\webpack_code\node_modules\jpegtran-bin\vendor\jpegtran.exe"'
Error with 'src\images\3.gif': spawn C:\Users\86176\Desktop\webpack\webpack_code\node_modules\optipng-bin\vendor\optipng.exe ENOENT

我们需要安装两个文件到 node_modules 中才能解决

• jpegtran.exe

需要复制到 node_modules\jpegtran-bin\vendor 下面

jpegtran 官网地址

• optipng.exe

需要复制到 node_modules\optipng-bin\vendor 下面

OptiPNG 官网地址