前言
在开发 Web 前端项目时，我们经常引入各种第三方库或框架，而这些库或框架会依赖其它的第三方库，从而形成一个庞大的依赖树。在项目构建和部署时，需要将这些依赖包打包成一个整体，以便在客户端执行时能够一次性加载并使用。
但是，在打包依赖包时，有时我们需要将一些依赖包分离出来，比如用 CDN 加速，比如因为这些包比较大，不需要每次都被加载等等。这时我们就需要使用 npm 包 unwrap-phases。
简介
unwrap-phases 是一个可以将依赖包解开的 webpack 插件，其将整个依赖树进行递归分析，将所有符合指定条件的依赖包（比如体积超过 200kb）从打包文件中剥离出来并打包成单独的文件，以便按需加载。这也就是所谓的「unwrap」，即解开。
安装
使用 npm 安装：
npm install unwrap-phases --save-dev
使用方法
在 webpack 配置文件中引入 unwrap-phases：
const UnwrapPhasesPlugin = require('unwrap-phases');然后在 plugins 中添加：
-- -------------------- ---- -------
-------- -
--- --------------------
-- ------ --
------- -------- -- ------------- - --- - ----- -- ------- ----- ---
-- ----
------- -
----- -------------------- -------- -- ----
--------- --------------- -- -----
-------------- ------------ -- ----- ---
--
-- --------
----------- --------------------------- -- --- --
-------------- ------------------------------ -- -- ----- --
----------- ------ -- -
-- ----------
--
-- ------
---- -
----- ----- -- ------
------ ------ -- ---- ----- --
------ --------- -- ----
-
--
-在这个配置中，我们指定了 unwrap 的条件是模块大小超过 200KB，即 module.size() > 200 * 1024，通过这个条件过滤符合条件的模块进行 unwrap，并将输出文件输出到指定目录。同时我们还指定了一些可选的配置项，如 publicPath、chunkFilename、formatPath 和 log 等。
示例代码
下面是一个简单的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------ - -------------------------
-------------- - -
------ -
----- -------------------- ------ -----------
--
------- -
----- -------------------- --------
--------- --------------
--
-------- -
--- --------------------
------- -------- -- ------------- - --- - -----
------- -
----- -------------------- --------
--------- ---------------
-------------- ------------
--
----------- ---------------------------
-------------- ------------------------------
----------- ------ -- -
------ ----- - ----------------------------- --- - ------
--
---- -
----- -----
------ ------
------ ---------
-
--
-
--结语
unwrap-phases 可以方便我们按需加载依赖包，从而减小打包文件体积，加快页面加载速度。通过本教程的介绍，希望读者可以掌握使用 unwrap-phases 的方法，并成功应用到自己的项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005565d81e8991b448d3352