告别普通打包Webpack打包结果优化特性：Tree Sharking及sideEffects

文章目录

• • • 1. Tree Shaking（摇树）

    • • 1.1 摇树解析

    • 1.2 Tree Shaking已被启动

    • 1.3 合并模块（延伸）

    • 1.4 我们对babel-loader进行了深入分析

      • 2. sideEffects
      • • 2.1 sideEffects讲解

    • 2.2 sideEffects 作用

    • 2.3 sideEffects 注意

今天我将与您交流Webpack的两个高级功能——TreeShaking与sideEffects。
它们都属于Webpack打包优化方案中的核心组件，并在实践中得到了广泛应用。

1. Tree Shaking（摇树）

1.1 摇树讲解

Tree Shaking 指的就是摇树的过程。伴随着Tree Shaking动作的进行，在树上会落下一地枯枝与树叶。

同样地，Tree-shaking 的作用就是除去未曾被使用的代码块，并将这些未引用代码正式标记为‘死码’。

Tree-shaking 是 Rollup 最初引入的一项重要功能；自版本 2.0 开始, 集成库为项目提供了这一项重要功能的支持。

在Webpack打包过程中的优化阶段中使用了该功能以启动自动检测未引用代码的功能，并随