我們使用 vue init 命令創(chuàng)建腳手架的時候，會有如下選擇

• Runtime + Compiler
• Runtime-only

那么它們究竟有什么區(qū)別呢，今天我們就來探討一下

image

<figcaption></figcaption>

首先，我們分別通過這兩種方式，創(chuàng)建Vue腳手架。我們來看一下兩者的 main.js 有什么不一樣

image

<figcaption></figcaption>

區(qū)別很明顯，在 Vue 實例中，runtime-compiler 創(chuàng)建的項目中的參數(shù)是 components 和 template，而在 runtime-only創(chuàng)建的項目中，參數(shù)是 render函數(shù)，這是他們最大的區(qū)別

組件渲染過程

其次，我們再來了解一下，組件是怎么被渲染到頁面當(dāng)中去的，這對我們理解上述問題起到關(guān)鍵性的作用

template --> ast --> render --> vDom --> 真實的Dom --> 頁面

• ast：抽象語法樹
• vDom：虛擬Dom

可以發(fā)現(xiàn)，template最終還是會被渲染為 render函數(shù)，記住這個結(jié)論

runtime-only

• 我們在使用 runtime-only 的時候，需要借助 webpack的loader工具，將 .vue 文件編譯為JavaScript，因為是在編譯階段做的，所以它只包含運行時的 Vue.js 代碼，所以代碼體積會更輕量。

• 在將 .vue 文件編譯為 JavaScript文件的過程中會將組件中的 template 模版編譯為 render 函數(shù)，所以我們得到的是 render 函數(shù)的版本。所以運行的時候是不帶編譯的，編譯是在離線的時候做的

• template 會通過 vue-template-compiler 轉(zhuǎn)換為 render 函數(shù)

runtime-compiler

• 因為在Vue中，最終渲染都是通過 render函數(shù)，如果寫 template 屬性，則會編譯為 render 函數(shù)，那么這個編譯過程會發(fā)生在運行時，所以需要帶有編譯器的版本
• 編譯過程會對性能有一定的損耗

結(jié)論

runtime-only： 將template在打包的時候，就已經(jīng)編譯為 render函數(shù)

runtime-compiler： 在運行的時候，才去編譯 template

結(jié)果： 發(fā)布生產(chǎn)的時候，runtime-only 構(gòu)建的項目代碼體積更小，運行速度更快

推薦使用runtime-only構(gòu)建項目