基于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)于瀏覽器的接口的存在，所以你不能使用它來(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 大小。
所以?xún)烧咦畲蟮膮^(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使用Elementui修改默認(rèn)的最快方法
這篇文章主要介紹了淺談Vue使用Elementui修改默認(rèn)的最快方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-12-12
這篇文章主要介紹了vue自定義指令實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了vue.js自定義指令相關(guān)定義、注冊(cè)、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2019-02-02
vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法
這篇文章主要介紹了vue項(xiàng)目中定義全局變量、函數(shù)的幾種方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了Vue之Axios的異步通信，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
vue項(xiàng)目中canvas實(shí)現(xiàn)截圖功能
這篇文章主要為大家詳細(xì)介紹了vue項(xiàng)目中canvas實(shí)現(xiàn)截圖功能，截取圖片的一部分，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
Vue數(shù)組中出現(xiàn)__ob__:Observer無(wú)法取值問(wèn)題的解決方法
__ob__: Observer這個(gè)屬性其實(shí)是Vue監(jiān)控變量產(chǎn)生的,下面這篇文章主要給大家介紹了關(guān)于Vue數(shù)組中出現(xiàn)__ob__:?Observer無(wú)法取值問(wèn)題的解決方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)旋轉(zhuǎn)圖片驗(yàn)證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要給大家介紹了關(guān)于Vue前端生成UUID的相關(guān)資料,前端需要生成一個(gè)唯一標(biāo)識(shí)符作為ID時(shí),可以使用Vue UUID插件,比如生成訂單號(hào)、用戶(hù)ID等等,需要的朋友可以參考下2023-09-09
Vue中使用v-print打印出現(xiàn)空白頁(yè)問(wèn)題及解決
這篇文章主要介紹了Vue中使用v-print打印出現(xiàn)空白頁(yè)問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-09-09
vue如何隨心所欲調(diào)整el-dialog中body的樣式
這篇文章主要介紹了vue如何隨心所欲調(diào)整el-dialog中body的樣式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05