webpack Tree shaking

319 阅读1分钟

为什么需要Tree shaking?

1,减少体积 2,节省时间和内存,因为声明一个变量,声明一个函数都是需要时间和内存的。

Tree shaking 原理?

如果是我实现,如何实现?
1 利用ast确定依赖关系,如果引入了,却没有使用,则从依赖关系里边去掉。
2 目前流行的做法
2.1 转成ast,这个很简单
2.2 第一次遍历ast,找到用到的声明的变量,函数,和类,比如被调用的函数,转成ast之后,会是call类型
2.3 第二次遍历,收集这些用过的变量函数和类,把没用到的删掉
2.4 把ast重新转换成可以运行的代码

require 和import,哪个会被Tree shaking?

import, 因为Tree shaking 依赖的是提前静态分析

代码

github.com/zsjun/tools…