探寻 webpack_bundle_analyzer 原理

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 的原理了呢?

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

转载于:https://www.cnblogs.com/coderhero/p/11189689.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值