什么是 stats-webpack-plugin？
stats-webpack-plugin 是一个用于生成 Webpack 打包统计信息的插件。它可以帮助你更好地了解你的打包内容，包括各个模块的大小、依赖关系和执行时间等信息。
如何安装？
使用 npm 安装：
--- ------- -------------------- ----------
如何使用？
在 Webpack 配置文件中引入插件，并在 plugins 数组中添加 StatsPlugin 实例即可。
----- ----------- - --------------------------------
-------------- - -
-- ---
-------- -
--- ------------------------- -
------------- -----
---
--
--在上面的例子中，StatsPlugin 的第一个参数 'stats.json' 是指定生成的统计信息文件的名称和路径。chunkModules 参数则表示是否包含所有模块的详细信息。
如何分析结果？
通过分析生成的统计信息，你可以更好地了解你的打包内容，进而进行优化。
以下是一些常见的分析方法：
查看模块大小
通过打开生成的统计信息文件，你可以查看每个模块的大小。例如，在 VS Code 中，你可以使用 Import Cost 插件来快速查看每个模块的大小。
查看依赖关系
通过打开生成的统计信息文件，你可以查看每个模块之间的依赖关系。例如，在 VS Code 中，你可以使用 Code Navigation 插件来快速跳转到依赖的源代码。
查看执行时间
通过打开生成的统计信息文件，你可以查看每个模块的执行时间。例如，在 Chrome 开发者工具中，你可以在 Performance 面板中查看每个模块的执行时间，并进一步进行优化。
示例代码
以下是一个简单的示例代码，它演示了如何使用 stats-webpack-plugin 来生成并分析打包统计信息。
-- -----------------
----- ---- - ----------------
----- ----------- - --------------------------------
-------------- - -
----- -------------
------ -----------------
------- -
--------- ------------
----- ----------------------- --------
--
-------- -
--- ------------------------- -
------------- -----
---
--
---- -------- ------ - ---- --------- ----------------------- -- -- -- --- ----
在上面的代码中，我们使用了 Lodash 的 chunk 方法来将数组 [1, 2, 3, 4, 5] 拆分成长度为 2 的子数组，并输出结果。通过使用 stats-webpack-plugin，我们可以生成并查看打包统计信息，进而进行优化。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/52627