Webpack 的 tree shaking 优化技巧介绍-JavaScript中文网-JavaScript教程资源分享门户

什么是 tree shaking？

Tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。

Webpack 如何实现 tree shaking？

Webpack 通过“静态分析”技术，找出源代码中的“死亡代码”，并在打包过程中将其删除，从而实现 tree shaking。

在 Webpack 中，通过以下两个配置来开启 tree shaking：

在 mode 属性中设置为 "production"，这将自动开启 tree shaking。
在 optimization 属性中设置 usedExports 为 true，这将启用代码摇树。

示例代码

// math.js
export function square(x) {
  return x * x;
}

export function cube(x) {
  return x * x * x;
}

// index.js
import { cube } from './math.js';

console.log(cube(3));

假设以上代码是我们的项目文件，我们运行 Webpack 打包后，将会得到以下代码：

-- -------------------- ---- -------
-------- ---- -
  --- - - -
    ------------ -------- --- -- -
      ------- ------ -
        ------- -------- -- -
          ------ -
        -- ----- -------- -- -
          ------ -
        -
      ---
      --- - - -------- --- -
        ------ - - -
      -- - - -------- --- -
        ------ - - - - -
      --
    -
  --
  ------ -------- --- -
    -- ------ ------ -------------
    --- - - ---- - -
      -------- --
    --
    ------ ------- ---------- --- ---------
  -
-

--- - - ---------- --- -
  --------------
---

-----------------------

我们可以看到，在打包后的代码中，square 函数并没有被打包进来，这就是 tree shaking 的效果。

总结

通过以上的示例代码和介绍，我们可以看到，tree shaking 可以帮助我们去掉无用的代码，从而减少打包后的文件大小，提高页面加载速度。在实际项目中，我们可以通过 Webpack 的配置来开启 tree shaking，从而优化我们的项目。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6629ee38c9431a720c77d7ac