[面試專題]Vue.js 2.0 獨立構(gòu)建和運行時構(gòu)建的區(qū)別

freewolf 發(fā)布于2019-08-29 13:16 / 2280人閱讀

摘要：獨立構(gòu)建和運行時構(gòu)建的區(qū)別標簽空格分隔未分類在使用時，有獨立構(gòu)建和運行時構(gòu)建兩種版本可供選擇。運行時構(gòu)建不包括模板編譯，不支持選項。這就形成了獨立構(gòu)建編譯器運行時和運行時構(gòu)建僅運行時。

Vue.js 2.0 獨立構(gòu)建和運行時構(gòu)建的區(qū)別

標簽（空格分隔）：未分類

在使用 Vue.js 2.0 時，有獨立構(gòu)建（standalone）和運行時構(gòu)建（runtime-only）兩種版本可供選擇。而在 Vue.js 1.0 中，卻沒有這種版本區(qū)別。到底該使用哪一個版本？這讓我有點懵逼的感覺。本著知其然還要知其所以然的精神，我決定好好研究下兩者間的區(qū)別。

Vue.js 的官方教程上是這么說的：

獨立構(gòu)建包括編譯和支持 template 選項。 它也依賴于瀏覽器的接口的存在，所以你不能使用它來為服務(wù)器端渲染。
運行時構(gòu)建不包括模板編譯，不支持 template 選項。運行時構(gòu)建，可以用 render 選項，但它只在單文件組件中起作用，因為單文件組件的模板是在構(gòu)建時預(yù)編譯到 render 函數(shù)中，運行時構(gòu)建只有獨立構(gòu)建大小的 30%，只有 16Kb min+gzip 大小。

Vue.js 的運行過程實際上包含兩步。第一步，編譯器將字符串模板（template）編譯為渲染函數(shù)（render），稱之為編譯過程；第二步，運行時實際調(diào)用編譯的渲染函數(shù)，稱之為運行過程。

由于 Vue.js 1.0 的編譯過程需要依賴瀏覽器的 DOM，所以無法（或者說沒有意義）將編譯器和運行時分開。因此在 Vue.js 1.0 分發(fā)包中，編譯器和運行時是打包在一起，都在瀏覽器端執(zhí)行。

然而到了 Vue.js 2.0，為了支持服務(wù)端渲染（server-side rendering），編譯器不能依賴于 DOM，所以必須將編譯器和運行時分開。這就形成了獨立構(gòu)建（編譯器 + 運行時）和運行時構(gòu)建（僅運行時）。顯而易見，運行時構(gòu)建要小于獨立構(gòu)建。

在現(xiàn)代前端工程構(gòu)建中，通常會使用 vue-loader 和 vueify 預(yù)編譯模板。在這種情況下，只需要打包運行時，而不需要打包編譯器，運行時構(gòu)建即可滿足所需。當然，如果你需要在前端使用 template 選項實時編譯模板，那么還是需要使用獨立構(gòu)建將編譯器發(fā)送到瀏覽器。