Vue.js 2.0 獨立構建和執行時構建的區別
標籤（空格分隔）： 未分類
在使用 Vue.js 2.0 時，有獨立構建（standalone）和執行時構建（runtime-only）兩種版本可供選擇。而在 Vue.js 1.0 中，卻沒有這種版本區別。到底該使用哪一個版本？這讓我有點懵逼的感覺。本著知其然還要知其所以然的精神，我決定好好研究下兩者間的區別。
Vue.js 的官方教程上是這麼說的：
獨立構建包括編譯和支援 template 選項。 它也依賴於瀏覽器的介面的存在，所以你不能使用它來為伺服器端渲染。
執行時構建不包括模板編譯，不支援 template 選項。執行時構建，可以用 render 選項，但它只在單檔案元件中起作用，因為單檔案元件的模板是在構建時預編譯到 render 函式中，執行時構建只有獨立構建大小的 30%，只有 16Kb min+gzip 大小。
Vue.js 的執行過程實際上包含兩步。第一步，編譯器將字串模板（template）編譯為渲染函式（render），稱之為編譯過程；第二步，執行時實際呼叫編譯的渲染函式，稱之為執行過程。
由於 Vue.js 1.0 的編譯過程需要依賴瀏覽器的 DOM，所以無法（或者說沒有意義）將編譯器和執行時分開。因此在 Vue.js 1.0 分發包中，編譯器和執行時是打包在一起，都在瀏覽器端執行。
然而到了 Vue.js 2.0，為了支援服務端渲染（server-side rendering），編譯器不能依賴於 DOM，所以必須將編譯器和執行時分開。這就形成了獨立構建（編譯器 + 執行時）和執行時構建（僅執行時）。顯而易見，執行時構建要小於獨立構建。
在現代前端工程構建中，通常會使用 vue-loader 和 vueify 預編譯模板。在這種情況下，只需要打包執行時，而不需要打包編譯器，執行時構建即可滿足所需。當然，如果你需要在前端使用 template 選項實時編譯模板，那麼還是需要使用獨立構建將編譯器傳送到瀏覽器。