如果你是一名前端工程师，那么你一定会遇到过这样的问题：当你使用了很多依赖包之后，你的项目的 js 文件会变得越来越大，这会严重影响你的网站加载速度，给用户带来很不好的体验。为了解决这个问题，你可以使用一些工具来检测你的 js 文件的大小，来找到一些优化的方法。而本文将介绍的 npm 包 browserify-size 就是一款非常好用的工具。
什么是 browserify-size？
browserify-size 是一个用于测量 Browserify 打包文件大小的模块。它可以在你打包完成后，通过命令行来输出打包后的文件大小统计信息，以便你调整打包的方式。在使用 browserify-size 之前，你需要安装 Browserify 客户端模块和 exorcist 转化 sourcemap 对象的 chrome 插件。
如何使用 browserify-size？
安装 browserify-size
npm install browserify-size -g
在命令行中输入以下命令来测量你的打包文件
browserify app.js -d | exorcist bundle.js.map > bundle.js && browserify-size bundle.js
其中 app.js 为你的入口文件，bundle.js 是你的打包文件。通过上述命令行，你可以得到你的打包文件的统计信息，如打包后的文件大小、gzip 压缩后的文件大小等。
示例代码
假设我们有以下 sample.js 文件：
var a = require('./a'); var b = require('./b'); console.log(a() + b());
其中，a.js 和 b.js 分别如下所示：
a.js
module.exports = function () { return 'Hello '; }
b.js
module.exports = function () { return 'world!'; }
我们可以首先使用 Browserify 对 sample.js 进行打包：
browserify sample.js -o bundle.js
通过上述命令，我们就可以得到一个名为 bundle.js 的文件。然后，我们再使用 browserify-size 命令来查看打包后的文件大小：
browserify-size bundle.js
输出：
bundle.js is 2227 bytes (minified), 788 bytes (gzipped)
至此，你就可以通过 browserify-size 很方便地监控你的 js 文件大小，从而做出有针对性的性能优化。
总结
通过上述介绍，你已经了解了 npm 包 browserify-size 的使用方法，这可以帮助你很好地解决 js 文件过大的问题。在实际开发中，你还可以结合一些其他工具和方法，如使用 webpack 来优化打包和压缩 js 文件等，从而进一步优化你的前端开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72483
