Vue.js為什么不支持templateUrl模式

原因

templateUrl使用ajax的方式在運(yùn)行時(shí)加載template，大型應(yīng)用中數(shù)量龐大的組件，以及瀏覽器對(duì)請(qǐng)求數(shù)量的限制，將導(dǎo)致嚴(yán)重的app加載性能問(wèn)題。
以組件為APP的基礎(chǔ)單元來(lái)開(kāi)發(fā)，而不是template

推薦單文件的組件開(kāi)發(fā)

vue中綜合了react(單文件html字符串拼到死)，和angularjs(大量ajax獲取template)，提出my_component.vue的單文件組件開(kāi)發(fā)，將template，style和js集中在一個(gè)文件中，利用webpack來(lái)構(gòu)建。目前sublime text已有vue文件的語(yǔ)法高亮插件，同時(shí)vue-cli也很給力，分分鐘搭建好基礎(chǔ)結(jié)構(gòu)。這都不是什么事兒了。

打死不用構(gòu)建工具/webpack

我們也還是有選擇的，雖然官方不推薦，但是也總不能把你打死啊

默默拼串

Vue.component('todo-item',{
props: ['title'],
template: '\
<li>\
{{ title }}\
<button v-on:click="$emit(\'remove\')">X</button>\
</li>\
',
});

使用<script type="x/template">

<script type="text/template" id="tpl">
<div>
<p>hello vue</p>
</div>
</script>

var MyComponent = Vue.extend({
template: '#tpl'
});

最佳實(shí)踐

使用.vue單文件開(kāi)發(fā)組件，使用webpack構(gòu)建

因?yàn)閠emplateURL是在運(yùn)行時(shí)通過(guò)ajax的方式加載模板，不需要構(gòu)建步驟為了你分離的文件。開(kāi)發(fā)的時(shí)候，這很爽，但是上線部署的時(shí)候，你就麻煩了。在HTTP2.0沒(méi)有大面積支持前，HTTP的請(qǐng)求數(shù)仍然是頁(yè)面加載的最關(guān)鍵因素。想象一下，在你的網(wǎng)站中，每個(gè)組件都是用templateURL，那么頁(yè)面出來(lái)前，你可能需要加載幾十個(gè)HTTP請(qǐng)求。可能你并不知道，大多數(shù)的瀏覽器是限制同一域名的并發(fā)請(qǐng)求數(shù)量的。當(dāng)你超過(guò)這個(gè)限額的時(shí)候，你頁(yè)面的初始渲染時(shí)間就得等待每次請(qǐng)求的返回。當(dāng)然，有工具可以幫助你提前注冊(cè)你所有的模板，但是這就多了一個(gè)構(gòu)建步驟，事實(shí)上，這就是大型網(wǎng)站的必然趨勢(shì)。