webpack-bundle-analyzer 分析

之前做了一个webpack依赖收集插件,依靠dependent递归去查找,但是总是有情况被漏过,分析一下官方的插件,看他怎么生成依赖树。

插件生成的最终效果图如下:

bundle analyzer result

对于插件的开发,webpack提供了“详细”的开发文档,此处不再记录。

这个插件做的工作本质就是分析在compiler.plugin('done', function(stats));时传入的参数。Stats是webpack的一个统计类。传入的实例如下图。

stats

Compilation

对Stats实例调用toJson()方法,获取格式化信息。toJson方法支持的参数参考源码

使用默认参数,即可获取到的统计json如下图:

stats.json

这个插件就是从stats.json中获取chunks然后最终使用Canvas画图。具体代码位于analyzer.js中的getViewerData方法。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容