「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...