随着前端项目的复杂性不断上升，项目所需的依赖包数量也大幅增加，这时候我们需要关注项目的性能与大小。针对这个问题，npm 包 sizer 可以给我们提供很好的解决方案。在本篇文章中，我将介绍如何使用 sizer，帮助我们更好地管理前端项目的大小。
sizer 简介
sizer 是一个用于分析 JavaScript 代码包大小的开源工具。它可以在 webpack 中作为插件使用，并为你提供了详细的分析报告，包括模块数量、大小及其对应的 gzip 和 brotli 压缩情况等。sizer 的目的是让开发者更好地理解其项目的 JavaScript 代码包大小，并帮助他们最大化地优化性能。
安装 sizer
安装 sizer 是非常简单的，我们只需要在命令行中运行以下命令：
npm install --save-dev webpack-bundle-analyzer
使用 sizer
在安装完 sizer 后，我们需要在 webpack 配置中引入它。在 webpack.config.js 中添加以下代码：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
//...
plugins: [
new BundleAnalyzerPlugin()
]
};接下来，我们可以运行 webpack 命令来生成分析报告。运行以下命令：
webpack --profile --json > stats.json
运行这个命令后，你可以在你的项目根目录中找到一个名为 stats.json 的文件，里面包含了你项目的统计信息用于帮助你分析 JavaScript 代码包的大小。
分析报告
下载好报告后，我们可以打开任何一种浏览器，输入 http://127.0.0.1:8888/ 来访问分析报告。你可能会看到一个类似下面的页面：
在这个报告中，你可以看到以下几个信息：
- 交互式树状图
- 包含模块的文件路径
- 文件大小
- 压缩后文件大小
深入分析
如果我们想更深入地了解我们的 JavaScript 代码包的大小，我们可以运行以下两个命令：
- 查看 gzip 格式下的文件大小：
cat stats.json | npx webpack-sources -j -e "module.chunks.reduce((sum, { files }) => sum.concat(files), []).map(file => [file, fs.statSync(file).size, zlib.gzipSync(fs.readFileSync(file)).length / 1024])" | column -t | sort -hrk 3 | less- 查看 brotli 格式下的文件大小：
cat stats.json | npx webpack-sources -j -e "module.chunks.reduce((sum, { files }) => sum.concat(files), []).map(file => [file, fs.statSync(file).size, zlib.brotliCompressSync(fs.readFileSync(file)).length / 1024])" | column -t | sort -hrk 3 | less这两个命令可以帮助我们更深入地了解我们的 JavaScript 代码包的大小，并帮助我们在必要的时候进一步优化性能。
总结
在这篇文章中，我们掌握了如何使用 sizer 来分析 JavaScript 代码包的大小，并给出了一些优化建议。希望对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4eab5cbfe1ea061139a