tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import
和 export
通俗一点解释就是:
当我引入这个模块的时候 我不引用这个模块的所有代码 我只引入它需要的代码
好处:
主要的决定因素是应用程序中死代码的数量。如果你没有多少死代码,那么你就看不到 tree-shaking 的多少好处。
什么是死代码
很简单:就是 Webpack 没看到你使用的代码。Webpack 跟踪整个应用程序的 import/export 语句,因此,如果它看到导入的东西最终没有被使用,它会认为那是“死代码”,并会对其进行 tree-shaking 。
1.代码不会被执行
if(false) {
do something
}
这样的代码可以称之为dead code
2.代码只写不读
a.js中
export function readCookie(){
do something
}
export function createCookie(){
do something
}
b.js中
import {readCookie} from './a.js';
readCookie()
因为b中并没有import createCookie,故而在webpack打包的时候会将其标记为 unused harmony
最后在uglify阶段被删除掉。
只支持es module 模块引用 也就是只支持 import的引用
Const add = require(‘xxx’) 这种是不支持的
Import 的 引入方式 底层是 静态的引入方式
而 require的引入方式 是动态的引入方式
Tree shaking 只支持静态的引入方式 所以只支持module的引入方式
Development 环境配置 配置 optimization
Package.json 配置 sideEffects 如果有不需要使用的tree shaking的模块 以数组的形式进行写入 例如 @babel/polly-fill 或者css文件
SideEffects:[‘@babel/polly-fill ’,’*.css’] 等