tree shaking 依赖于ES Module 的静态语法分析，在项目编译时移除无用的代码以减少文件体积。
usedExports
在文件中，我们可能定义了变量但是暂时又没有用到，这样会造成空间的浪费。在 mode 为 production 时，会默认做一些配置，将无用的代码删除。为了看到没有做处理时编译后的文件效果，在 webpack 中做如下配置。
module.exports = {
// 其他配置省略
mode: 'development',
optimization: {
minimize: false,
usedExports: false,
},
};
在这种配置情况下，当存在没有用到的变量时，还是照原样编译到了 js 文件中。
想要移除掉 js 文件中的无用代码，开启 minimize 通过 usedExports 配置
module.exports = {
// 其他配置省略
mode: 'development',
optimization: {
minimize: true,
usedExports: true,
},
};
这样编译后就将没有用到的变量 username 和 foo 函数都移除掉了
sideEffects
这时候仍存在一个问题，如果通过模块化引入另一个js文件，即使没有被使用，useExports 也不会进行 tree shaking。
// index.js
import './format.js';
// format.js
export function timeFormat() {
return '2022-01-01';
}
比如上面这段代码，通过 import 语句引入 format.js，但 format.js 导出的函数没有被使用。
此时仍然对于 import 语句进行了编译，我们希望在引入的文件中也进行 tree shaking，删除无用的代码，这个时候在 package.json 中配置 sideEffects 属性来处理。
// package.json 其他配置省略
{
"sideEffects": false
}
sideEffects 用于告知 webapck 编译器哪些模块有副作用
- 定义为 false，表示所有的模块都不存在副作用，不需要用到的时候直接删除
- 定义为数组，告知有副作用的模块，该模块中有副作用的代码会被保留，没有副作用且没有使用到的代码会被删除。
这样引入的 js 文件没有被使用，进行了 tree shaking，可是 css 资源通过 import 引入也被删除了，也不会编译生成对应的 css 文件，解决方式可以选择在 sideEffects 属性中定义数组，或者处理 css 文件的 loader 中配置（推荐）。
// package.json
{
"sideEffects": [
"**.css"
],
}
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.css$/,
// 其它配置省略
sideEffects: true,
},
],
},
};
在这种情况下，在 js 文件中引入的 css 文件就不会直接被移除掉
PurgeCss
不过 sideEffects 属性是不会帮助 css 文件内部进行 tree shaking 操作的，比如没有在代码中创建 div 和 h1 标签，但这段 css 代码也没有被移除。
想要在css代码中进行 tree shaking 可借助 purgecss-webpack-plugin。通过 npm install purgecss-webpack-plugin -D 安装后在 package.json 中配置。
// package.json
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob');
const path = require('path');
const dirname = process.cwd();
const resolveApp = (folder) => path.resolve(dirname, folder);
module.exports = {
plugins: [
new PurgecssPlugin({
paths: glob.sync(`${resolveApp('./src')}/**/*`, { noDir: true }),
safelist: function () {
return {
standard: ['html', 'body'],
};
},
}),
],
};
- paths：表示要检测哪些目录下的内容需要被分析
- glob：对某些文件、文件夹通过正则表达式来进行匹配， webpack或其他插件已经安装过
- noddir：表示匹配文件，不匹配文件夹
- safelist：默认情况下，Purgecss会将html、body标签的样式移除掉，如果希望保留，需要在safelist中添加
这样 css 文件内部也会移除掉无用的代码
总结
在项目性能优化时，可以通过 tree shaking 来做以下操作
optimization 中配置 usedExports 为 true，移除 js 无用代码。
( 这也是 mode 为 production 时的默认配置 )package.json 中配置 sideEffects 为 false，css 在 loader 中设置 sideEffects 为 true，对模块进行优化。
使用 PurgeCss 来对 css 文件内部的代码进行 tree shaking。
以上就是关于 tree shaking 的介绍， 更多有关 webpack 的内容可以参考我其它的博文，持续更新中~
