Promise, setTimeout, requestAnimationFrame, requestIdleCallback 这几个概念相信很多人都很熟悉了，最近在看 React Fiber 源码的时候又对它们有了更深一层的认识，在此分享一下。下文将用 rAF 代表 requestAnimationFrame, rIC 代表 requestIdleCallback。

context就是vue对象：那么这个components 是什么时候加进去的，他在组件变成vnode的时候，有了初始化的信息来源.$options信息如下： {代码...} 在 entry-client文件里$mount引发的 update逻辑出现了这个 {代码...} 初始化的vue的 _uid为 2：_render所依赖的 render函...

header头的形式仅比内链link的方式块了 4ms

BigPipe目标：前后端分离，提高页面渲染速度 BigPipe解决的问题： 1、下载堵塞 2、服务端下载浪费 一般的网页加载是直接通过访问服务器，发送请求，收到返回数据，然后渲染 一般堵塞模型： 后端渲染页面→网络延迟→浏览器端页面渲染，所有的数据一次性渲染 BigPipe思...

上代码： {代码...} bbbb: {代码...} Math.js: {代码...} 经过WEBPACK处理后，变成如下： {代码...} TERSER后： {代码...} 肉眼可见有代码并没有被shaking掉 而如果Math.js:换成这个呢？ {代码...} TERSER前： {代码...} TERSER后： {代码...} 可见该移除的都已经被...

为了解决这个问题，HTTP/1.1 引入了 Keep-Alive，可以一个 TCP 链接上发送多个 HTTP 请求，但这个协议模型本身还是在 HTTP/1.0 上修修补补，缺点还是有的，也就是同一个 TCP 链接上，多个 HTTP 请求彼此间是阻塞的，也就是请求 A 先得到响应后，请求 B 才会开始发送。

ReplaceSource，是webpack里的一项基础数据，用来表示从源码到打包后的代码的一种替换关系的说明： 如图，这个ReplaceSource的replacements由四项内容组成： 一直不明白其中的start和index是表示什么意思 其实转换前的源码是： {代码...} 一共是38个字符 35-38区间是...

这里终于把 提取到cube和square的源头给找到了： {代码...} this.parser.parse： 神秘的 parser: {代码...} 解析AST： {代码...} Parser.parse如下： {代码...} 导出的变量还可以时其他地方import进来的： {代码...}

{代码...} 每一个模块都会经过一次 JavascriptGenerator.generate {代码...} 对于以上源码模块，以module代替： 关键属性： {代码...} 即 {代码...} dependencies翻译成附属品？ 这2个比较关键 序号3、5：HarmonyExportSpecifierDependency module的来源可以 追踪到`...

AsyncSeriesHook 异步串行 从tapable生产的脚本来看AsyncSeriesHook 先来看 tapAsync+ callAsync {代码...} 源码： {代码...} 从以上看，特别简单，串行执行。 再看下tap加callAsync {代码...} 源码： {代码...} 即 顺序执行，报错就提前执行总callback 再来看：tapP...

AsyncParallelHook: 异步 并行 从tapable生产的脚本来看AsyncParallelHook 先来看 tap + callAsync {代码...} 看生产的源码就知道：这种模式属于顺序执行，一个报错立即回调： {代码...} 接着看 tapAsync + callAsync {代码...} 生产的源码如下： {代码...} 最后看 t...

vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生“算了吧，回头再学，反正已经可以写基础组件了”，于是就关闭了vue说明文档。

CLI mangling property names (--mangle-props)Note: THIS WILL BREAK YOUR CODE. A good rule of thumb is not to use this unless you know exactly what you're doing and how this works and read this section until the end.

这里的import包含3个概念 1：import 语句2：import函数3：webpack 模块文件里的import函数 查看caniuse，结果如下： import 语句：[链接]import 函数：[链接] 可以看出 import 函数的支持率略低于import 语句， 目前为止，import函数已经被纳入了stage4: [链接] {代...

optimization.namedModules 这个配置对于调试起来很方便，比如原本生产的一段代码是长这样的： {代码...} 很多奇怪的数字，比如最后几行的 [0，0] 是表示了什么意思？ 如果配置上namedModules 为true呢 （当然 mode = development时，默认也是开启的），则打包成这样...