基于Vue2中獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的區(qū)別是什么

這篇文章主要為大家展示了“基于Vue2中獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的區(qū)別是什么”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“基于Vue2中獨(dú)立構(gòu)建與運(yùn)行時(shí)構(gòu)建的區(qū)別是什么”這篇文章吧。

其實(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ì)寫入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開始，Vue開始支持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)建的區(qū)別是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！