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

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

探寻 webpack_bundle_analyzer 原理的更多相关文章

  1. KVO的实现原理探寻

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/c ...

  2. iOS底层原理总结 - 探寻block的本质(一)

        面试题 block的原理是怎样的?本质是什么? __block的作用是什么?有什么使用注意点? block的属性修饰词为什么是copy?使用block有哪些使用注意? block在修改NSMu ...

  3. 从XML文件乱码问题,探寻其背后的原理

    出现应用程序读取XML文件乱码的场景: 加入xml文件以<?xml version="1.0" encoding="utf-8" ?> 格式的:如果 ...

  4. 从XML文件乱码问题,探寻其背后的原理(转)

    由于网友反应本文图片不能显示,由于时间关系未能及时修正.请访问原文地址: 本文出自http://blog.csdn.net/dinglang_2009/article/details/6895355, ...

  5. 从XML文件乱码问题,探寻其背后的原理 (ZHUAN)

    出现应用程序读取XML文件乱码的场景: 加入xml文件以<?xml version="1.0" encoding="utf-8" ?> 格式的:如果 ...

  6. Andorid APK反逆向解决方案---梆梆加固原理探寻

    本文章由Jack_Jia编写,转载请注明出处.   文章链接:http://blog.csdn.net/jiazhijun/article/details/8892635 作者:Jack_Jia    ...

  7. MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN

    在Membership系列的最后一篇引入了ASP.NET Identity,看到大家对它还是挺感兴趣的,于是来一篇详解登录原理的文章.本文会涉及到Claims-based(基于声明)的认证,我们会详细 ...

  8. 探寻 JavaScript 逻辑运算符(与、或)的真谛

    十二月已经过半,冬季是一个美妙的季节,寒冷的空气逼得人们不得不躲在安逸舒适的环境里生活.冬季会给人一种安静祥和的氛围,让人沉浸在其中,仿佛是一个旧的阶段的结束,同时也是一个新的阶段的开始.这么说来,西 ...

  9. [转]MVC5 - ASP.NET Identity登录原理 - Claims-based认证和OWIN

    本文转自:http://www.cnblogs.com/jesse2013/p/aspnet-identity-claims-based-authentication-and-owin.html 在M ...

随机推荐

  1. 将RDL报表转换成RDLC报表的函数

    原文:将RDL报表转换成RDLC报表的函数 近日研究RDLC报表,发现其不能与RDL报表兼容,尤其是将RDL报表转换成RDLC报表.网上的资料贴出的的转换方式复杂且不切实际,遂决定深入研究.经研究发现 ...

  2. Plupload上传实例《模仿微云上传实例》,带源码

    Plupload上传实例<模仿微云上传实例>,带源码,作者:鱼塘总裁 如有疑问,加群交流:646104701 一.实例截图 1.上传过程 2.上传成功 3.上传失败 4.最小化 二.所需文 ...

  3. C++中构造函数能调用虚函数吗?(答案是语法可以,输出错误),但Java里居然可以

    环境:XPSP3 VS2005 今天黑总给应聘者出了一个在C++的构造函数中调用虚函数的问题,具体的题目要比标题复杂,大体情况可以看如下的代码: class Base { public: Base() ...

  4. Win8 Metro(C#)数字图像处理--3.2图像方差计算

    原文:Win8 Metro(C#)数字图像处理--3.2图像方差计算 /// <summary> /// /// </summary>Variance computing. / ...

  5. InnoSetup提升系统管理员权限(通过破解方式修改?)

    PrivilegesRequired=admin 1 2 3 4 5   找到```INNO```安装目录下的```SetupLdr.e32```文件(其实就是一个exe程序),将程序中的```Man ...

  6. Win10《芒果TV》商店版更新v3.2.4:新增跨年事件直播、电视台直播,新年快乐

    听说半个娱乐圈都来了,<芒果TV>UWP版邀您一起,于2016年12月31日晚,观看<湖南卫视2016·2017跨年演唱会>直播,请更新v3.2.4版,主要新增大事件直播和电视 ...

  7. Cannot read property 'apply' of undefined

    ...TypeError: Cannot read property 'apply' of undefined :一般都是作用域不对 ...TypeError: Cannot read propert ...

  8. Android零基础入门第74节:Activity启动和关闭

    上一期我们学习了Activity的创建和配置,当时留了一个悬念,如何才能在默认启动的Activity中打开其他新建的Activity呢?那么本期一起来学习如何启动和关闭Activity. 一.概述 经 ...

  9. Easy Compression Library(代替TFileStream, TMemoryStream and TStream)

    Easy Compression Library is a very easy-to-use replacement of TFileStream, TMemoryStream and other T ...

  10. 【Qt】无边框窗体中带有ActiveX组件时的一个BUG

    无意中发现的一个BUG,Qt5.1.1正式版首先创建一个GUI工程,拖入一个QAxWidget控件(为了使ActiveX生效,需要在.pro文件中加入CONFIG += qaxcontainer)接着 ...