最近在做的多个webpack+react项目里，都会涉及到webpack的打包分析与性能优化。
打包文件体积过大，优化bundle文件更是非常重要。
webpack有很多成熟的方案来减小打包代码的大小，如split coding, CommonsChunkPlugin, tree shaking等。这里不再详细分析，网上有很多教程。
通常大的项目 bundle JS 都有很多个打包文件组成，(有可能是分割成了多个thunk文件，有可能是多入口文件)：
每次优化后，我都需要记录对比每个打包文件对应的大小。在优化前，记录 各个 bundle JS 文件的体积大小,优化后，记录新的各个 bundle JS体积的大小。
例如：
为了比较对main.[hash].js体积大小优化的成果，我需要记录main.[hash].js优化前和优化后的大小。过了几天，因为业务的需要,我修改了某个module的代码，main.[hash].js 的体积大小变化了，如果我还需要对它做优化，我需要继续记录优化前优化后的大小数据。经过几轮优化后，直观的分析、记录、对比这些体积大小数据变得非常麻烦。
所有空余时间，我做了一个bundle-compare-analyzer工具。专门记录每次打包文件们的大小信息，它将信息通过dashboard的方式展现在终端上。
这样经过多次的优化、打包、记录，我可以直观的观察、对比出每次优化后bundle JS的体积大小，不会再丢失记录过的数据，分析起来更加方便。
功能虽小，但确实实用方便 ? ? ?
Github地址：https://github.com/lanjinglin...
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。