Vue CLI 中 Runtime-Compiler和Runtime-only的区别

悠悠 2023-03-02 13:19 16阅读 0赞

[—文章首发—][Link 1]

在我们初始化vue项目的时候，会让我们选择 Runtime-Compiler 还是 Runtime-only 。  
![在这里插入图片描述][format_png]  
那我们就来看一下他们有什么区别  
Runtime-Compiler：编译器版本。  
Runtime-only：运行时版本。

如果你需要在客户端编译模板（例如，向 `template`选项传入一个字符串，或者需要将模板中的非DOM的HTML挂载到一个元素），你需要带有编译器的版本，因而需要完整构建版本。

// 这种情况需要编译器
    new Vue({ 
    	template:`<div>{ {message}}</div>`
    })
    
    // 这种情况不需要编译器
    new Vue({ 
      render(h){ 
      	return h('div',this.message)
      }
    })

在使用vue- loader或 verify时，\*.vue文件中的模板会在构建时（build time）预编译pre-compile）为 Javascript。最终生成的 bundle中你不再需要编译器（ compiler，因此可以直接使用只含有运行时的构建版本（ runtime-only)。

由于只含有运行时构建版本 （runtime-only比完整构建版本（full- build轻量大约30%,你应该尽可能使用只含有运行时的构建版本。如果你还是希望使用完整构建版本，则需要在打包器中配置别名：

由于运行时版本的构建比其全面版本的重量轻约30%，Runtime-only 性能更高，代码量更少，因此你可以随时使用它。如果你仍然希望使用完整版本，则需要在捆绑程序中配置别名。

**总结**：

**如果在之后的开发中，你依然使用 template ，就需要选择 Runtime-Compiler 。**  
**如果在之后的开发中，使用的是 .vue 文件夹开发，那么可以选择 Runtime-only 。**

--------------------

关于他们的底层知识。

Runtime-Compiler 和 Runtime-only

![format_png 1][]

为什么存在这样的差异呢？

我们需要先理解Vue应用程序是如何运行起来的。

Vue中的模板如何最终渲染成真实DOM。

我们来看下面的一幅图。

![format_png 2][]

Vue程序运行过程中

Runtime-Compiler 执行步骤

> template --> ast --> render --> vdom --> UI

Runtime-only 执行步骤（性能更高，代码量更少）

> render --> vdom --> UI

Runtime-only 在执行代码的时候，直接就到render 了，减少`template --> ast --> render` 的代码量，性能更高。

[Link 1]: https://aqingya.cn/articl/433146b0.html
[format_png]: /images/20230208/3c4baa696e7347b58c180f9d74fefd4a.png
[format_png 1]: /images/20230208/6e81a433ff864bc3838580b7bdf17f5b.png
[format_png 2]: /images/20230208/59f567ccf3044ed5a94f4826b3de9ea8.png