2024-07-05|
Tree ShakingRollupWebpack构建优化
Tree Shaking(树摇优化)
介绍基于 ES Module 静态分析移除未使用代码的 Tree Shaking 原理与限制。
树摇优化(tree shaking)
除了使用 ES 模块之外,Rollup 还可以通过静态分析导入的代码,并排出实际没有使用的代码,
树摇优化的核心核心思想在变异阶段通过静态分析确定代码的使用情况,而不是在运行时
所以树摇优化一般建立在 ES 模块语法基础之上的, ESM 的导出导入都是静态的
CommonJS 模块的导出导入是动态的,无法在编译阶段静态分析代码使用情况,一般情况下,树摇优化工具无法在 CommonJS 模块中精确的树咬,因为无法静态分析模块之间的导入/导出关系
然而一些构建工具(Webpack) 会尝试通过静态分析和启发式方法对 CommonJS 模块进行近似的树摇优化,他们会尽可能的识别出,可以在编译阶段确定未使用的代码,并进行删除,但是这种处理方法不如 ES6 模块的优化效果好,