基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別(詳解)
其實(shí)這個(gè)問(wèn)題在你使用vue-cli構(gòu)建項(xiàng)目的時(shí)候是不會(huì)出現(xiàn)的，因?yàn)槟阍趧?chuàng)建項(xiàng)目的構(gòu)建過(guò)程中已經(jīng)讓你勾選了，然后會(huì)寫(xiě)入webpack.config.js中。
這就在這，會(huì)讓你選擇Vue的構(gòu)建方式。
如果你勾選Runtime + Compiler就會(huì)出現(xiàn)如上的配置。
其實(shí)這里涉及到一個(gè)概念：
獨(dú)立構(gòu)建：含義是，擁有完整的模版編譯功能和運(yùn)行時(shí)調(diào)用功能
運(yùn)行時(shí)構(gòu)建：含義是，只擁有完整的運(yùn)行時(shí)調(diào)用功能
為什么會(huì)有這種區(qū)分呢？
第一，因?yàn)閂ue使用/運(yùn)行過(guò)程分為兩個(gè)階段，第一階段是將模版進(jìn)行編譯(如單個(gè)vue文件中的template)為渲染函數(shù)(render)，第二階段是將實(shí)際函數(shù)的調(diào)用階段。
第二，因?yàn)樽訴ue2.x開(kāi)始，Vue開(kāi)始支持SSR（服務(wù)端渲染），而服務(wù)端是沒(méi)有DOM這些概念的。所以導(dǎo)致了從Vue2.x后會(huì)有分包的問(wèn)題。
下面是官方話術(shù)：
獨(dú)立構(gòu)建包括編譯和支持 template 選項(xiàng)。 它也依賴于瀏覽器的接口的存在，所以你不能使用它來(lái)為服務(wù)器端渲染。
運(yùn)行時(shí)構(gòu)建不包括模板編譯，不支持 template 選項(xiàng)。運(yùn)行時(shí)構(gòu)建，可以用 render 選項(xiàng)，但它只在單文件組件中起作用，因?yàn)閱挝募M件的模板是在構(gòu)建時(shí)預(yù)編譯到 render 函數(shù)中，運(yùn)行時(shí)構(gòu)建只有獨(dú)立構(gòu)建大小的 30%，只有 16Kb min+gzip 大小。
所以兩者最大的區(qū)別也就出來(lái)了
獨(dú)立構(gòu)建包括編譯和支持 template 選項(xiàng)
運(yùn)行時(shí)構(gòu)建不包括模板編譯，不支持 template 選項(xiàng)
以上這篇基于Vue2的獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的差別(詳解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
atom-design(Vue.js移動(dòng)端組件庫(kù))手勢(shì)組件使用教程
這篇文章主要介紹了atom-design(Vue.js移動(dòng)端組件庫(kù))手勢(shì)組件使用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
Vue Element前端應(yīng)用開(kāi)發(fā)之整合ABP框架的前端登錄
VUE+Element 前端是一個(gè)純粹的前端處理，前面介紹了很多都是Vue+Element開(kāi)發(fā)的基礎(chǔ)，從本章隨筆開(kāi)始，就需要進(jìn)入深水區(qū)了，需要結(jié)合ABP框架使用2021-05-05
這篇文章主要介紹了vue實(shí)現(xiàn)與安卓、IOS交互的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue3中各種類型文件進(jìn)行預(yù)覽功能實(shí)例
在vue移動(dòng)端項(xiàng)目中經(jīng)常遇到這樣的需求,對(duì)一些上傳的附件可以點(diǎn)擊之后在線預(yù)覽,所以下面這篇文章主要給大家介紹了關(guān)于vue3中各種類型文件進(jìn)行預(yù)覽功能的相關(guān)資料,需要的朋友可以參考下2021-09-09
在Vue.js開(kāi)發(fā)中,經(jīng)常會(huì)遇到需要展示搜索和列表的需求,為了提高代碼復(fù)用性和開(kāi)發(fā)效率,我們可以封裝一個(gè)可配置的搜索列表組件,下面我們就來(lái)講講如何實(shí)現(xiàn)這樣一個(gè)組件吧2023-08-08
今天小編就為大家分享一篇淺談v-for 和 v-if 并用時(shí)篩選條件方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景
這篇文章主要介紹了vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
this.$emit()的作用大家應(yīng)該也都知道,主要用于子組件像父組件傳值,這篇文章主要給大家介紹了關(guān)于vue中this.$emit使用方法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關(guān)于vue3獲取、設(shè)置元素高度的相關(guān)資料,小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單易懂,需要的朋友可以參考下2024-08-08