之前做了一个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方法。
打包分析工具（webpack-bundle-analyzer） 分析 Bundle 由什么模块组成分析什么模块占据...
今天介绍一款分析webpack打包性能分析的插件： webpack-bundle-analyzer 先上图： 这个...
介绍webpack-bundle-analyzer 这个插件来分析SPA应用。 使用 npm install --...
基于webpack的可视化资源分析工具webpack-bundle-analyzer分析优化项目资源。 安装web...
title: webpack-bundle-analyzer webpack打包分析图可视化webpack-bun...
webpack可视化打包分析以及实践 webpack-bundle-analyzer简介 webpack-bund...
分析打包出来的文件 安装webpack-bundle-analyzer这个插件,然后使用npm run build...
之前做了一个webpack依赖收集插件，依靠dependent递归去查找，但是总是有情况被漏过，分析一下官方的插件...
一、 使用webpack-bundle-analyzer 分析打包后的生成的文件结构进行优化； 在package....
安装分析工具 首先安装webpack-bundle-analyzer 在工程的打包文件中加上plugin， 笔者的...
本文标题：webpack-bundle-analyzer 分析
本文链接：https://www.haomeiwen.com/subject/hjsclftx.html
网友评论