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. 使用path制作各类型动画路径

    原文:使用path制作各类型动画路径 <Window x:Class="使用path制作各类型动画路径.MainWindow" xmlns="http://sche ...

  2. p标签内不能嵌套div(注解)

    相关知识: 内联元素可以嵌套内联元素,块级元素可以嵌套部分块级元素并也能嵌套内联元素,但内联元素不能嵌套块级元素.块级元素为block,内联元素为inline,拥有“inline”特性的同时又拥有“b ...

  3. Win8 Metro(C#)数字图像处理--2.39二值图像投影

    原文:Win8 Metro(C#)数字图像处理--2.39二值图像投影  [函数名称]   二值图像投影         ImageProjection(WriteableBitmap src) ...

  4. LINQ查询表达式---------from子句

    LINQ查询表达式---------from子句 LINQ的查询由3基本部分组成:获取数据源,创建查询,执行查询. //1.获取数据源 List<, , , , , }; //创建查询 var ...

  5. Android零基础入门第32节:新推出的GridLayout网格布局

    原文:Android零基础入门第32节:新推出的GridLayout网格布局 本期主要学习的是网格布局是Android 4.0新增的布局,和前面所学的TableLayout表格布局 有点类似,不过他有 ...

  6. Go语言v1.8正式发布,有显著的性能提升和变化(go适合服务器编程、网络编程)

    前言 Go语言现在在服务端的网络编程领域越来越火,尤其像IM即时通讯应用这种富网络应用且对服务端网络性能要求极高的场景,很高兴看到Golang发布了1.8正式版,希望在多核架构横行的时代多一些这种顺应 ...

  7. 屏蔽按CapsLock键切换到大写时,编辑框自动弹出的提示(UnregisterClass(TOOLTIPS_CLASS)后,重新设置WndProc并注意返回值)

    WNDPROC OldProc; LPCTSTR lpStr = TEXT("保持大写锁定打开可能会使您错误输入密码"); LRESULT CALLBACK WindowProc( ...

  8. 编译 Qt 5.6(使QtWebEngine支持XP)

    说明 qt 5.6的编译进行了数十遍,才得出本文的可行方案,之所以花了这么多的时间,主要是qt引入了QtWebEngine模块后,导致编译难度直线上升,而且又有一些中国特色的问题(如360安全卫士)导 ...

  9. 预编译加速编译(precompiled_header),指定临时文件生成目录,使项目文件夹更干净(MOC_DIR,RCC_DIR, UI_DIR, OBJECTS_DIR),#pragma execution_character_set("UTF-8")"这个命令是在编译时产生作用的,而不是运行时

    预编译加速编译 QT也可以像VS那样使用预编译头文件来加速编译器的编译速度.首先在.pro文件中加入: CONFIG += precompiled_header 然后定义需要预编译的头文件: PREC ...

  10. IIS6利用URLScan修复IIS短文件名漏洞

    一.下载URLScan 3.1 链接: http://pan.baidu.com/s/1i4HfKrj 密码: dmud 二.安装URLScan 3.1 安装完成以后,我们可以在System32/In ...