4

Tree Shaking 简介

 2 years ago
source link: https://hijiangtao.github.io/2021/06/25/Tree-Shaking/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Tree Shaking 简介

扫码或点击链接查看完整 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

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的

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK