如何对bundle体积进行监控和分析？

这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」。

导语

在webpack打包后，我们有时可能会需要优化打包速度，或者优化打包后的产物，这时候就需要我们对webpack打包的bundle文件进行监控和分析，来确定我们的优化方向。

Import cost

VSCode 插件 Import cost

这个插件通过 vscode 的插件市场就可以搜索的到，目前是免费的。这个插件的用处是什么呢，借助官方的一张图。

在使用 require 导入模块后，插件会自动在代码末端提示该模块的大小。对于 import 也同样适用。

当前版本对于一些较大的模块，会用红色的文字标识出来。

webpack-bundle-analyzer

这是一款打包文件分析工具，可以先用起来看看是什么效果。

安装:

npm install webpack-bundle-analyzer –save-dev

配置:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin


plugins: [
      new BundleAnalyzerPlugin()
    ]

打包后，在浏览器中输入 http://127.0.0.1:8888/即可看到直观图：

可以说是非常nice的一款文件打包分析工具了。

bundlesize

bundlesize 是一款自动化体积监控工具，你可以指定某个文件甚至是文件夹，监控它的大小不超过某个阈值。

安装

npm install bundlesize --save-dev

配置

package.json:

 "bundlesize": [
    {
      "path": "./src/main.js",
      "maxSize": "3 kB"
    }
  ]

运行:

npx bundlesize

结果:

实际上就是在 package.json中配置了要监控的路径文件以及大小，如果超过了大小会以红色显示，没有就是绿色。

我们往往监控的不会仅仅是一个js，很可能是一个模块，一个文件夹。这里可以借助表达式：

在使用之前需要安装 glob

npm install glob

"bundlesize": [
    {
      "files": [
        {
          "path": "build/**/app-*.js",
          "maxSize": "5 kB"
        },
        {
          "path": "build/**/*.chunk.js",
          "maxSize": "50 kB"
        }
      ]
    }
  ]

以上就实现了对 build 打包后的文件夹所有 .chunk.js 和 app-xxx.js 结尾的文件大小监控了。

总结

以上是实现对webpack打包资源的监控和分析方法，有利于我们在优化打包速度和打包产物时做分析适用。