简介
webpack-bundle-time-loader 是一个 webpack 的 loader，它可以帮助开发者测量 webpack 构建 bundle 的时间。它会在 webpack 打包时输出每个 chunk 打包所花费的时间，从而帮助开发者了解哪些 chunk 费时较长，从而可以进行性能优化。
安装
可以通过 npm 安装：
--- ------- -------------------------- ----------
也可以通过 yarn 安装：
---- --- -------------------------- -----
使用
在 webpack 配置文件中，添加 webpack-bundle-time-loader：
-------------- - -
-- ---
------- -
------ -
-
----- --------------
---- -----------------------------
-------- ----------------------- -------
--
--
--
--如上所示，我们添加了一个 module.rules，配置了 test 属性为 /\.(js|jsx)$/，即匹配所有的 .js 和 .jsx 文件。我们把 webpack-bundle-time-loader 添加到 use 属性中，让它在处理这些文件时生效。注意 include 属性指定需要处理的文件路径。
启动 webpack 构建后，我们可以看到类似于下面的输出：
----- --------------------
-------- ------- ------
----- ------
----- --- ---------- --------
----- ---- ------ ----- -----
----------- ---- --- - --------- ----
------- ---- --- - --------- ----
--------------- ---- --- - --------- ------------
---------- ---- - ------- ---------------
---------------- ---- --- --- -------
---------------- --- ----- --- -------
- - ------ -------
----- --- -------- --------------- ------ ---- --- ------- ----------
- -------------- ----
------- ------- --- ----- - -------
------- -- ---- ---------- ---- ---
-------------- ---- --- -------
-------------- --- ----- -------
------- -- ---- --------------------------------- - -- ------- ---- ---
--------------------------------- ---- --- -------
---我们可以看到，它会新增一行 chunk {id} {name} ({type}) {size} [entry] [rendered]，其中 {id} 是 chunk 的唯一标识符，{name} 是 chunk 的名称，{type} 是 chunk 的类型，{size} 是 chunk 的大小，[entry] 和 [rendered] 表示 chunk 是否是入口 chunk 和渲染 chunk。
后面跟了一行 chunk 的内容，可以看到哪些文件被包含进了这个 chunk 中。
示例代码
index.js
------ - ----- - ---- ---------- --------
utils.js
------ -------- ------- - ------------------- --------- -
webpack.config.js
-------------- - -
------ -----------------
------- -
--------- ----------
--
------- -
------ -
-
----- --------------
---- -----------------------------
-------- ----------------------- -------
--
--
--
--总结
webpack-bundle-time-loader 可以帮助我们测量 webpack 构建 bundle 的时间，从而优化项目性能。在实际的开发过程中，我们可以根据输出的结果来进行代码优化，以提高项目的性能和用户体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005601481e8991b448de247