由深入浅出 Vue 构建流程可知，当我们使用：

1

import Vue from 'Vue'

时，默认查找的文件是 dist/vue.runtime.esm.js。而构建出这个文件的入口文件是：src/platforms/web/entry-runtime.js。

runtime 版本是不包含 compiler 的，也就是没有编译 Vue 模板的过程。通常编译的工作交给 vue-loader，也就是 webpack 来代劳。但是从分析源码的角度来看，我们还是有必要要了解一下编译过程。所以我们从带 compiler 的入口开始:

1
2

// 源码分析从此开始
src/platforms/web/entry-runtime-with-compiler.js

很多同学看源码分析，一般直接从 src 看起。像 Vuejs 这种项目，目录繁杂，入口都很难找到。不从中拎出几个线头来，很难从全局把握源码的流程。

理解源码是如何构建的，能帮助我们梳理这个过程。

什么是插件

按照 wiki 的解释：插件是一个用来向现有系统添加新功能的组件。当你的程序支持插件时，我们称此程序可定制。

一个插件系统的设计通常如下图所示：

• 程序主体要提供一个注册插件的机制（plugin manager）。
• 插件要拥有一个可供调用的接口，在注册时使用(plugin interface)。
• 插件调用主体程序提供的服务，来扩展功能(service interface)。

我们将上面三点放在 Vue 的环境来说：

• Vue 使用 Vue.use 注册插件。使用方法为： Vue.use(plugin, options)。
• 插件要提供一个 install 方法，供 Vue 调用。
• 插件内部可以通过使用 Vue 提供的功能来扩展 Vue 的能力。

细节在代码分析部分介绍。

什么 mixin

mixin， 中文意思为混入。

比如去买冰激凌，我先要一点奶油的，再来点香草的。我就可以吃一个奶油香草的冰激凌。如果再加点草莓，我可以同时吃三个口味的冰激凌。

js 代码表示

假设把你已有的奶油味的称为 base，把要添加的味道称为 mixins。用 js 伪代码可以这么来写：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const base = {
  hasCreamFlavor() {
    return true;
  }
}
const mixins = {
  hasVanillaFlavor() {
    return true;
  },
  hasStrawberryFlavor() {
    return true;
 }
}

function mergeStrategies(base, mixins) {
  return Object.assign({}, base, mixins);
}
// newBase 就拥有了三种口味。
const newBase = mergeStrategies(base, mixins);

注意一下这个 mergeStrategies。

合并策略可以你想要的形式，也就是说你可以自定义自己的策略，这是其一。另外要解决冲突的问题。上面是通过 Object.assign 来实现的，那么 mixins 内的方法会覆盖base 内的内容。如果这不是你期望的结果，可以调换 mixin 和 base 的位置。

背景知识

v8 是一个 JIT(Just in time) 编译器。与传统的解释器一行一行执行不同的是，JIT 会在执行脚本前，对源码先解析（parsing）、再编译（compiling)，速度相比前者提升了不少。但解析和编译仍然消耗时间。能否将中间结果缓存起来呢？

所以 v8 在 4.2（node > 5.7.0） 时，就支持了 code caching 的功能。减少二次执行的构建时间，加快脚本的整体执行速度。

缓存中间结果，持久化到硬盘

要使用中间文件，需要先生成中间文件。v8 提供了以下几个方法：

• v8::ScriptCompiler::kProduceCodeCache 是否生成 code cache
• v8::ScriptCompiler::Source::GetCachedData 获取生成的 code cache
• v8::ScriptCompiler::kConsumeCodeCache 消费生成的 cache

v8 是 c++ 代码，在 node 中有对应的 vm.Script 与上面的功能相对应。我们需要对生成的 code cache 设计一套持久化机制，来方便二次消费。

require hook

以上解决了code cache 生成和消费的问题，但是源码从哪里来呢？

我们知道 node.js 通过 require 来连接代码，那么对所有 require 的 module 进行编译并缓存结果是不是就可以了？当然。

v8-compile-cache 便是这样一个仓库- 对编译中间过程持久化，加快整体执行时间。