Runtime-Compiler和Runtime-Only的區別

咱們使用 vue init 命令建立腳手架的時候，會有以下選擇

• Runtime + Compiler
• Runtime-only

那麼它們究竟有什麼區別呢，今天咱們就來探討一下

首先，咱們分別經過這兩種方式，建立Vue腳手架。咱們來看一下二者的 main.js 有什麼不同

區別很明顯，在 Vue 實例中，runtime-compiler 建立的項目中的參數是 compoennts 和 template，而在 runtime-only建立的項目中，參數是 render函數，這是他們最大的區別

組件渲染過程

其次，咱們再來了解一下，組件是怎麼被渲染到頁面當中去的，這對咱們理解上述問題起到關鍵性的做用

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

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

能夠發現，template最終仍是會被渲染爲 render函數，記住這個結論

runtime-only

• 咱們在使用 runtime-only 的時候，須要藉助 webpack的loader工具，將 .vue 文件編譯爲JavaScript，由於是在編譯階段作的，因此它只包含運行時的 Vue.js 代碼，因此代碼體積會更輕量。

• 在將 .vue 文件編譯爲 JavaScript文件的過程當中會將組件中的 template 模版編譯爲 render 函數，因此咱們獲得的是 render 函數的版本。因此運行的時候是不帶編譯的，編譯是在離線的時候作的

• template 會經過 vue-template-compiler 轉換爲 render 函數

runtime-compiler

• 由於在Vue中，最終渲染都是經過 render函數，若是寫 template 屬性，則會編譯爲 render 函數，那麼這個編譯過程會發生在運行時，因此須要帶有編譯器的版本
• 編譯過程會對性能有必定的損耗

結論

runtime-only： 將template在打包的時候，就已經編譯爲 render函數

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

結果： 發佈生產的時候，runtime-only 構建的項目代碼體積更小，運行速度更快

推薦使用runtime-only構建項目