Vue源码解析第9篇：编译器优化有哪些技巧？
- 内容介绍
- 文章标签
- 相关推荐
本文共计2445个文字，预计阅读时间需要10分钟。
深入理解编译器的静态标记过程+前言+上一篇文章+Vue+源码解读（8）—— 编译器之+解析+详细解读了编译器的第一部分，如何将HTML模板字符串编译成AST。今天带来编译器的第二部分，深入解析编译器的核心功能。
深入理解编译器的静态标记过程 前言上一篇文章 Vue 源码解读（8）—— 编译器 之 解析 详细详解了编译器的第一部分，如何将 html 模版字符串编译成 AST。今天带来编译器的第二部分，优化 AST，也是大家常说的静态标记。
目标深入理解编译器的静态标记过程
源码解读 入口/src/compiler/index.js
/**
* 在这之前做的所有的事情，只有一个目的，就是为了构建平台特有的编译选项（options），比如 web 平台
*
* 1、将 html 模版解析成 ast
* 2、对 ast 树进行静态标记
* 3、将 ast 生成渲染函数
* 静态渲染函数放到 code.staticRenderFns 数组中
* code.render 为动态渲染函数
* 在将来渲染时执行渲染函数得到 vnode
*/
export const createCompiler = createCompilerCreator(function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
// 将模版解析为 AST，每个节点的 ast 对象上都设置了元素的所有信息，比如，标签信息、属性信息、插槽信息、父节点、子节点等。
本文共计2445个文字，预计阅读时间需要10分钟。
深入理解编译器的静态标记过程+前言+上一篇文章+Vue+源码解读（8）—— 编译器之+解析+详细解读了编译器的第一部分，如何将HTML模板字符串编译成AST。今天带来编译器的第二部分，深入解析编译器的核心功能。
深入理解编译器的静态标记过程 前言上一篇文章 Vue 源码解读（8）—— 编译器 之 解析 详细详解了编译器的第一部分，如何将 html 模版字符串编译成 AST。今天带来编译器的第二部分，优化 AST，也是大家常说的静态标记。
目标深入理解编译器的静态标记过程
源码解读 入口/src/compiler/index.js
/**
* 在这之前做的所有的事情，只有一个目的，就是为了构建平台特有的编译选项（options），比如 web 平台
*
* 1、将 html 模版解析成 ast
* 2、对 ast 树进行静态标记
* 3、将 ast 生成渲染函数
* 静态渲染函数放到 code.staticRenderFns 数组中
* code.render 为动态渲染函数
* 在将来渲染时执行渲染函数得到 vnode
*/
export const createCompiler = createCompilerCreator(function baseCompile (
template: string,
options: CompilerOptions
): CompiledResult {
// 将模版解析为 AST，每个节点的 ast 对象上都设置了元素的所有信息，比如，标签信息、属性信息、插槽信息、父节点、子节点等。