【笔记】Webpack实现TreeShaking

发表于 更新于 阅读次数：

前言

Webpack实现TreeShaking

通过TerserWebpackPlugin对JS函数进行TreeShaking

下载依赖

1
npm install -D terser-webpack-plugin

修改配置文件

optimization.usedExports：对从未使用的函数通过魔法函数unused harmony export null进行标记，Terser会自动忽略具有标记的函数的打包

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  optimization: {
    usedExports: true
  },
  minimize: true,
  minimizer: [
    new TerserPlugin()
  ]
};

通过PurgeCSSWebpackPlugin对CSS类进行TreeShaking

下载依赖

1
npm install -D purgecss-webpack-plugin glob

修改配置文件

webpack.config.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const TerserPlugin = require("purgecss-webpack-plugin");
const glob = require("glob");

module.exports = {
  plugins: [
    new PurgecssPlugin({
      paths: glob.sync(`${path.resolve(__dirname, "../src")}/**/*`, { nodir: true }),
      safelist: function () {
        return {
          standard: ["body"]
        }
      }
    })
  ]
};

配置TreeShaking的白名单

  • 默认所有import ""导入但是没有使用的模块都会被TreeShaking

  • JS文件如果所有导出的模块都是纯函数，则无需配置或指定为false

sideEffects：指定需要Webpack忽略TreeShaking的文件，缺省值为false，表示没有需要忽略TreeShaking的文件

package.json
1
2
3
{
  "sideEffects": false
}
  • JS文件如果导出的模块有非纯函数，具有副作用，则需要忽略这个JS文件的TreeShaking
package.json
1
2
3
4
5
{
  "sideEffects": [
    "./src/<file>.js"
  ]
}
  • 忽略所有CSS文件的TreeShaking
    • 因为所有CSS文件的导入一定没有使用，都是import ""，所以需要忽略所有CSS文件的TreeShaking
package.json
1
2
3
4
5
{
  "sideEffects": [
    "*.css"
  ]
}

完成