在前端开发中，webpack 已经成为了必不可少的工具。webpack 可以按需加载代码，压缩代码，优化代码，提高页面的性能和加载速度。但是，在大型项目中，我们经常要面临打包体积过大的问题。为了解决这个问题，我们经常需要使用 webpack 打包分析器来分析打包后的体积和组成。但是，有时候我们可能会发现，打包分析器的报告中 chunks 组成不太容易理解。今天，我们就来看看如何让 webpack 打包分析器看得懂 chunks 组成。
什么是 Chunks?
在 webpack 中，一个 chunk 是由多个模块组成的文件。在一个文件中，我们可能会引用其他模块，这些模块也会被打包到该文件中。Webpack 会将这些模块打包在一起，形成一个 chunk。Chunks 是 webpack 打包时用来分离模块的单位，每个 chunk 都会被打包成一个单独的文件。
为了让 webpack 打包分析器看得懂 chunks 组成，我们需要进行以下操作：
1. 安装 webpack-bundle-analyzer
webpack-bundle-analyzer 是一个用于分析 webpack 打包后资源占用情况的插件。我们只需要在项目中安装该插件即可。
npm install --save-dev webpack-bundle-analyzer
2. 添加 webpack-bundle-analyzer 到 webpack 配置文件中
添加以下代码到 webpack 配置文件的 plugins 属性中：
-- -------------------- ---- -------
----- -------------------- - --------------------------------------------------------
-------------- - -
-- ------- -------
-------- -
-- ----
--- ----------------------
------------- ---------
------------------ -----
------------- ------
--------------- -------------- -- ---------
---
--
--在这段代码中，我们同时设置了以下属性：
- analyzerMode：分析模式，设置为 static，表示生成 HTML 文件来分析代码。
- generateStatsFile：是否生成 json 文件，该文件包含了所有打包后的代码信息。
- openAnalyzer：是否打开默认浏览器来查看报告，设置为 false。
- reportFilename：生成的报告文件名，设置为 report.html。
3. 运行 webpack，并打开报告
在 webpack 打包完成后，会自动生成一个 report.html 文件。我们只需要打开该文件，即可看到详细的 chunks 组成情况。在该报告中，每个块的信息都会被展示。
示例代码
以下是一个示例 webpack 配置文件，你可以参考该文件来将 webpack-bundle-analyzer 添加到你的项目中。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- -------------------- - -----------------------------------
----- -------------------- - --------------------------------------------------------
-------------- - -
----- --------------
------ -
----- -----------------
--
------- -
--------- --------------------------
----- ----------------------- --------
--
------- -
------ -
-
----- ----------
---- ----------------------------- --------------
--
-
----- ----------------------
---- -
-
------- --------------
--
--
--
--
--
-------- -
--- -------------------
--------- -------------------
---
--- ----------------------
--------- ---------------------------
---
--- ----------------------
------------- ---------
------------------ -----
------------- ------
--------------- --------------
--
--
--总结
在本文中，我们介绍了 chunks 的概念，并且详细说明了如何让 webpack 打包分析器看得懂 chunks 组成情况。通过这些步骤，我们可以更好地理解代码结构，优化代码质量和性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f1b2e4f6b2d6eab3b88aa6