当前端项目到达一定的规模后,我们一般会采用按模块方式组织代码,这样可以方便代码的组织及维护。但会存在一个问题,比如我们有一个 utils 工具类,在另一个模块中导入它。这会在打包的时候将 utils 中不必要的代码也打包,从而使得打包体积变大,这时候就需要用到Tree shaking技术了。
tree-shaking 是一种通过清除多余代码方式来优化项目打包体积的技术。 原理
-
利用ES6模块的特点
-
只能作为模块顶层的语句出现。
-
import的模块名只能是字符串常量,不能动态引入模块。
-
import 引入的模块不能再进行修改的,虽然tree-shaking的概念在1990年就提出来了,但是直到ES6的ES6-style模块出现后才真正被利用起来。这是因为tree-shaking只能在静态模块下工作。ES6模块加载是静态的,因此在ES6种使用tree-shaking是非常容易地。而且,tree-shaking不仅支持import/export级别,而且也支持声明级别