Webpack4.0 中 Tree-Shaking 的使用以及优缺点

阅读时长 5 分钟读完

介绍

在前端工程化中,Webpack 4.0 是一个非常常见的打包工具,它支持导入非 JavaScript 文件,如图片、样式等,并且可以进行 Tree-Shaking 优化,以减小打包后的文件体积。Tree-Shaking 技术是通过静态分析代码中未被使用的部分,从编译后的 JavaScript 中精简掉这些未使用的部分,从而减小代码体积。下面将介绍在 Webpack 4.0 中如何使用 Tree-Shaking 以及其优缺点。

如何使用

  1. 安装 Webpack 4.0

首先,如果你还没有安装 Webpack 4.0,可以在终端中输入以下命令:

  1. webpack.config.js 配置

在 webpack.config.js 文件中,可以通过以下两种方式开启 Tree-Shaking:

方式一:通过配置 mode 为 production,Webpack 4.0 自动开启 Tree-Shaking。

方式二:手动设置 optimization 配置项中的 minimize 和 usedExports 为 true。

示例代码

下面以一个简单的 ES6 模块为例,例如一个包含两个函数的工具函数库:

my-utils.js:

app.js:

通过运行 Webpack 打包后,得到的 app.js 代码如下:

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

可以看到,Tree-Shaking 技术验证了 app.js 中只使用了 my-utils.js 工具函数库中的 add 函数代码,并将其独立输出,subtract 函数代码则被删除。

优缺点

优点

  1. 减小文件体积:Tree-Shaking 可以排除无用的代码,从而减小最终打包后的文件体积。

  2. 优化加载速度:由于减小了文件体积,因此也减小了文件加载的时间。

缺点

  1. 需要一些配置:开启 Tree-Shaking 需要进行一些配置,在一些特殊的情况下可能出现失效的情况,需要针对不同的需求进行调整。

  2. 不适用于所有情况:Tree-Shaking 适合于工具函数库或者通过 NPM 引入的第三方库,如果是手写的业务逻辑代码,则会有一定的限制。

结论

Webpack 4.0 中的 Tree-Shaking 技术是一项非常有价值的优化技术,可以有效减小打包后的文件体积,优化网页加载速度,适用于工具函数库或者通过 NPM 引入的第三方库。在实际应用中,需要注意配置的一些细节和一些特殊情况下的调整。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6752a35d8bd460d3ad96c0ee

纠错
反馈