[面試專題]Vue.js 2.0 獨立構建和運行時構建的區別

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 選項實時編譯模板，那麼仍是須要使用獨立構建將編譯器發送到瀏覽器。