15. Tree Shaking

usedExports

在 usedExports 设置为 true 时，会有一段注释：unused harmony export mul,告知 Terser 在优化时，可以删除掉这段代码。usedExports 实现 Tree Shaking 是结合 Terser 来完成的。
案例：
webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',

  plugins: [
    new HtmlWebpackPlugin(),
  ],
};

src/math.js

export const add = (x, y) => x + y;
export const subtract = (x, y) => x - y;

src/index.js

import { add } from './math';
console.log(add(1, 2));

从上面看到，我们引用并使用了math.add 函数，没有使用 math.subtract 函数
打包之后： tree shaking 配置

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  mode: 'development',
  devtool: 'inline-source-map',
  plugins: [
    new HtmlWebpackPlugin(),
  ],
  optimization: {
    // 使用 ES module 方式引用的模块将被 tree shaking 优化
    usedExports: true,
  },
};

如上图，只是标记了，但是没有清除代码。

const TerserPlugin = require("terser-webpack-plugin");
  optimization: {
    usedExports: true,
    minimize: true,
    minimizer:[
      new TerserPlugin({
        parallel: true,
        extractComments:false,
      })
    ]
  }

打包之后

sideEffects（副作用）

// math.js
export const add = (x, y) => x + y;
// math2.js
export const subtract = (x, y) => x - y;

// index.js
import { add } from './math';
// 引入了，但是没有使用
import { subtract } from './math2';
console.log(add(1, 2));

webpack 中配置了 usedExports: true，但是打包出的文件还会有引入 math2 的部分。Webpack 认为 math2.js 有“副作用”。具有副作用的文件不应该做 tree-shaking，因为这将破坏整个应用程序。 如何告诉 Webpack 你的代码无副作用，可以通过 package.json 有一个特殊的属性 sideEffects，就是为此而存在的。
sideEffects 有三个可能的值：

• true：（默认值）这意味着所有的文件都有副作用，也就是没有一个文件可以 tree-shaking。

**package.json**
{
  "sideEffects": true, // 所有的文件都有副作用，也就是没有一个文件可以 `tree-shaking`。
}

• false：告诉 Webpack 没有文件有副作用，所有文件都可以 tree-shaking。

{
  "sideEffects": false, // 告诉 Webpack 没有文件有副作用，所有文件都可以 `tree-shaking`。
}

• 数组：是文件路径数组。它告诉 webpack，除了数组中包含的文件外，你的任何文件都没有副作用。因此，除了指定的文件之外，其他文件都可以安全地进行 tree-shaking。

{
  "sideEffects": ['*.css', '*.global.js'], // 告诉 Webpack 扩展名是 .css 或者 .global.js 文件视为有副作用，不要 `tree-shaking` 
}

sideEffects 和 usedExports
sideEffects 和 usedExports（更多被认为是 tree shaking）是两种不同的优化方式。 sideEffects 更为有效 是因为它允许跳过整个模块/文件和整个文件子树。 usedExports 依赖于 terser 去检测语句中的副作用。它是一个 JavaScript 任务而且没有像 sideEffects 一样简单直接。而且它不能跳转子树/依赖由于细则中说副作用需要被评估。

CSS Tree Shaking

作用：删除未使用的CSS
安装npm install purgecss-webpack-plugin -D
配置 PurgeCss purgecss也可以对less文件进行处理（所以它是对打包后的css进行tree shaking操作）