webpack_bundle_analyzer 是什么？

这是webpack官方出品的，对项目中模块依赖关系及体积的分析插件，其界面如下：

问题来了，这是如何来进行统计的？

这里提供一个插件的代码，可以观察到里面的 json 结构。

var fs = require('fs');var path = require('path');function FunctionFinder() {};FunctionFinder.prototype.apply = function (compiler) {    compiler.plugin('emit', function (compilation) {        compiler.plugin('done', function(stats){                        let json = stats.toJson({                timings: false,                cached: false,                errors: false,                errorDetails: false,                warning: false            });            fs.writeFile(path.resolve(`./1.json`) , JSON.stringify(json.chunks[1]), function (err) {                if (err) {                    console.log(err);                } else {                    console.log('ok.');                }            });        });    });};module.exports = FunctionFinder;

 

代码中的 stats 是一个巨大的对象，里面包含 chunks，也就是 webpack 分块之后的文件模块，如果项目比较大的话，直接输出 json 可能会报内存溢出，此时可以分批写入文件或者写入不同文件。

上面代码中，只是将 chunks 数组里下标为1的 chunk 到 1.json 中，最终格式化后，可以看到：

 

基本就是类似这样的 json 结构，从里面可以看到依赖关系，文件尺寸等。

看到这里，是否已经清楚 webpack_bundle_analyzer 的原理了呢？

更为深入的部分，可以直接去看源代码，这里只做简单介绍。