tree shaking介绍一下 tree shaking 及其工作原理是一种通过清除多余代码方式来优化项目打包体积的

介绍一下 tree shaking 及其工作原理

是一种通过清除多余代码方式来优化项目打包体积的技术。

在ES6以前，我们可以使用CommonJS引入模块：require()，这种引入是动态的，也意味着我们可以基于条件来导入需要的代码：

但是CommonJS规范无法确定在实际运行前需要或者不需要某些模块，因为它是动态引入原理。所以CommonJS不适合tree-shaking机制\

在 ES6 中，引入了完全静态的导入语法：import。这也意味着下面的导入是不可行的：

// 不可行，ES6 的import是完全静态的

if (condition) { 
    myDynamicModule = import("foo"); 
} else { 
    myDynamicModule = import("bar"); 
}

我们只能通过导入所有的包后再进行条件获取。如下：

import foo from "foo";
import bar from "bar";

if (condition) {
  // foo.xxxx
} else {
  // bar.xxx
}

ES6的import语法可以完美使用tree shaking，因为可以在代码不运行的情况下就能分析出不需要的代码。
总结：
因为tree shaking只能在静态modules下工作。
ECMAScript 6 模块加载是静态的,因此整个依赖树可以被静态地推导出解析语法树。所以在 ES6 中使用 tree shaking 是非常容易的

tree shaking的原理是什么?

基于ES6 Module的静态导入语法，通过依赖树判断加载了哪些模块和变量进而删除不关代码减少打包体积