仓库源文站点原文


title: Tree Shaking 简介 layout: keynote thread: 265 date: 2021-06-25 author: Joe Jiang categories: Presentation tags: [2021, webpack, ESM, tree-shaking, SideEffects, 优化, 摇树] excerpt: 本周分享会上,给团队同学分享了 Tree Shaking 的相关内容。哈哈是的,这已经不是一个新鲜事了……

iframe: https://hijiangtao.github.io/slides/s-YFD/Tree-Shaking.html

扫码或点击链接查看完整 Slides

本周分享会上,给团队同学分享了 Tree Shaking 的相关内容。哈哈是的,这已经不是一个新鲜事了,最开始是想分享 esbuild 的,但最近杂事多,期间没有准备太多资料,所以让我偷一次懒吧。

以下为目录,主要包含概念介绍、模块化标准介绍、SideEffects、webpack 相关内容以及一些最佳实践。

  1. WHAT DOES TREE-SHAKING ACTUALLY MEAN?
  2. ES MODULES VS. COMMONJS
  3. SCOPE AND SIDE EFFECTS
  4. OPTIMIZING WEBPACK
  5. WEBPACK VERSION 3 AND BELOW
  6. AVOID PREMATURE TRANSPILING
  7. TREE-SHAKING CHECKLIST

TREE SHAKING 是什么?Tree Shaking 通常用于描述移除 JavaScript 上下文中的未引用代码 (dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。

这个术语和概念兴起于 ES2015 模块打包工具 rollup。

模块化这个话题在 ES6 之前是不存在的,因此这也被诟病为早期 JavaScript 开发全局污染和依赖管理混乱问题的源头。

常见的模块化方案包含这几种:

CommonJS 比 ES Modules 规范早了几年。它旨在解决 JavaScript 生态系统中缺乏对可重用模块的支持。CommonJS 有一个 require() 函数,它根据提供的路径获取外部模块,并在运行时将其添加到作用域中。

说到这里,就得说说运行时执行的特点,主要包含以下两点:

  1. 无法在编译阶段确定产物
  2. 你可以在代码中随意使用 require,比如全局、函数、if/else 条件语句中等等

从 CommonJS 规范中吸取教训,ES Modules 标准采用 import/export 关键字对模块进行处理,且不依赖运行时执行结果。

ES Modules 标准的特点

  1. 只能作为模块顶层的语句出现
  2. import 的模块名只能是字符串常量
  3. import binding 是 immutable的

……