简介
print-chunks-plugin 是一个 webpack 插件，用于在编译时输出打包后每个 chunk 的信息，如 chunk 名称、chunk 大小、每个模块的大小等。这对于开发者来说能更好地了解打包后的代码情况、优化性能以及发现可能存在的问题。
安装
使用 npm 安装：
npm install --save-dev print-chunks-plugin
使用
在 webpack 配置文件中引入插件并添加到 plugins 数组中即可：
const PrintChunksPlugin = require('print-chunks-plugin');
module.exports = {
plugins: [
new PrintChunksPlugin()
]
};插件默认只会在生产环境下启用。如果需要在开发环境下启用，可以指定 enabled 选项为 true：
new PrintChunksPlugin({enabled: true})示例
考虑下面的 webpack 配置文件：
-- -------------------- ---- -------
----- ----------------- - -------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------------------
-------------- -----------------------
--
------------- -
------------ -
------- ------
-------- ----
-
--
-------- -
--- --------------------
--- -------------------
-
--通过使用 print-chunks-plugin，我们能得到类似以下的输出：
-- -------------------- ---- -------
------ -- ------
--------------------------- --- ----- - --------- ----------- ---
----------------------------------- ------ --- - --------- ----------- -----------
---------------------------- ---- --- - --------- ----
------------
--- ----- ----
---------------------------
----------- ------- ----
-----------------------------------
---- ----- ----
----------------------------其中，输出的每个 chunk 包括文件名、文件大小、排序位置、输出状态、chunk 名称等信息。EntryPoint 则输出每个入口文件所包含的 chunk。
注意事项
print-chunks-plugin 中的输出信息包括 webpack4 分块优化 产生的 chunk。如果此插件和其他分离插件同时使用，可能会有重复的 chunk 输出情况。
结论
借助 print-chunks-plugin 这个库，我们可以更好的了解打包后的代码情况，除此之外，也可以根据该插件输出的信息进行优化性能或查找可能的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600575c581e8991b448ea74d