介绍

Tree Shaking 指的是基于 ES6 模块语法特性，达到移除 JavaScript 上下文中的未引用代码的作用。

Webpack、Rollup、Vite 等主流的编译构建工具都支持 Tree Shaking 功能。

声明代码可被移除

Webpack 打包一个 npm 包时，它不会主动去移除未引用的代码，因为不知道这些是否有用，也就是所谓的“副作用”。

npm 包自身可以声明：我没有副作用，代码未引入可以删。做法是 package.json 中增加标记：

{
  "sideEffects": false
}

sideEffects 属性也相当于触发 Tree Shaking 的开关。

声明副作用

如果包里有 css，这些 css 毕竟不是 js，里面的代码无法准确判断是否引用，所以标记为有副作用，避免 Webpack 一不小心把里面的代码都删了。

{
  "sideEffects": ["./src/some-side-effectful-file.js", "*.css"]
}

图片资源的按需构建

https://github.com/webpack-contrib/url-loader/issues/228

Webpack 4 通过 url-loader 处理图片的引入，未能与 Tree Shaking 功能结合使用，所有图片都会被打包。

Webpack 5 通过 asset/inline 来引入， Tree Shaking 可以生效，未使用的图片不会被打包进去。

Vite 经过测试，也不支持图片资源的按需构建。