「bundle-compare-analyzer」 一个简单的比较各个版本 bundle.js 大小的可视化工具.

最近在作的多个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...