最近在做的很多webpack+react项目都会涉及到webpack打包分析和性能优化。打包文件太大，优化bundle文件很重要。webpack有很多成熟的方案来降低打包后的代码体积，比如splitcoding、CommonsChunkPlugin、treeshaking等，这里就不详细分析了，网上有很多教程。通常一个大项目bundleJS由很多打包文件组成（可能分为多个thunk文件，或者多入口文件）：每次优化后，我需要记录并比较相应的大小。优化前，记录每个bundleJS文件的体积大小，优化后，记录每个bundleJS文件的新体积大小。例如：为了比较优化main.[hash].js大小的结果，我需要记录优化前后main.[hash].js的大小。几天后，因为业务需要，修改了某个模块的代码，main.[hash].js的大小发生了变化。如果我还需要优化它，我需要继续记录优化和优化后的尺寸数据。经过几轮的优化，要对这些体量数据进行直观的分析、记录、对比变得非常麻烦。在我所有的空闲时间里，我制作了一个bundle-compare-analyzer工具。专门记录每个打包文件的大小信息，通过dashboard在终端显示信息。这样经过多次优化、打包、记录，我可以直观的观察和比较每次优化后bundleJS的大小，而且记录的数据不会丢失，分析起来更方便。功能虽小，但实用方便?？？Github地址：https://github.com/lanjinglin...
