【笔记】Webpack实现TreeShaking

前言

Webpack实现TreeShaking

通过TerserWebpackPlugin对JS函数进行TreeShaking

下载依赖

1	npm install -D terser-webpack-plugin

修改配置文件

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

webpack.config.js

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

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"]
        }
      }
    })
  ]
};

默认所有import ""导入但是没有使用的模块都会被TreeShaking
JS文件如果所有导出的模块都是纯函数，则无需配置或指定为false

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

package.json

1
2
3

{
  "sideEffects": false
}

JS文件如果导出的模块有非纯函数，具有副作用，则需要忽略这个JS文件的TreeShaking

package.json

{
  "sideEffects": [
    "./src/<file>.js"
  ]
}

忽略所有CSS文件的TreeShaking
- 因为所有CSS文件的导入一定没有使用，都是import ""，所以需要忽略所有CSS文件的TreeShaking

package.json

{
  "sideEffects": [
    "*.css"
  ]
}

推荐订阅源

6Jyc5p+a

前言

通过TerserWebpackPlugin对JS函数进行TreeShaking

下载依赖

修改配置文件

通过PurgeCSSWebpackPlugin对CSS类进行TreeShaking

下载依赖

修改配置文件

完成