在前端开发过程中，我们需要时刻关注网站或应用的性能和加载速度。而对于网站中的静态资源（如图片、CSS、JS等），我们需要对它们的出现频率进行监测，以便进一步优化网站的加载速度。npm 包 asset-frequency-graph 就是一款可以帮助我们实现这个功能的工具。
什么是 asset-frequency-graph
asset-frequency-graph 是一个用于生成静态资源频率报告的 npm 包。它可以遍历你的项目文件夹，并查找所有静态资源，之后生成一个频率分布图表。该分布图表可以让你看到不同资源的出现频率，从而为你的性能优化提供帮助。
安装 asset-frequency-graph
我们可以使用 npm 来安装 asset-frequency-graph：
npm install --save-dev asset-frequency-graph
使用 asset-frequency-graph
安装完成后，我们需要在项目中进行配置。你可以在 package.json 文件中加入如下代码：
-- -------------------- ---- -------
-
------- -------------
---------- --------
---------- -
------------------------ ---------------------- -- ----------------------- -- ------------
--
------------------ -
------------------------ --------
-
-在 package.json 文件的 scripts 属性中新增了一个 asset-frequency-graph 的脚本。这个脚本会使用 asset-frequency-graph 命令，其中 -i 参数表示需要检查的文件类型，-o 参数表示输出报告的文件名。
接下来，你可以在命令行输入以下命令来启动 asset-frequency-graph：
npm run asset-frequency-graph
该命令会输出 assets-frequency.html 文件，该文件包含了静态资源的频率分布图表。
示例代码
在本例子中，我们将监测 src 目录中所有的 js、css 和 png 文件。生成的频率报告会以 assets-frequency.html 的形式呈现。
-- -------------------- ---- -------
-
------- -------------
---------- --------
---------- -
------------------------ ---------------------- -- ----------------------- -- ------------
--
------------------ -
------------------------ --------
-
-运行以下命令，启动 asset-frequency-graph：
npm run asset-frequency-graph
生成的 assets-frequency.html 文件将包含以下内容：
结论
使用 asset-frequency-graph 可以在静态资源的使用上，帮助我们更好地了解网站的性能瓶颈。在开发过程中也能更快速的进行优化。这一款 npm 包真的非常有用，强烈建议开发者使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/73615