[译]为什么Vue不支持templateURL

原文链接

Vue的新用户最常问的一个问题，特别是以前使用Angular的用户，是“我可以使用” templateURL吗？这个问题我回答过很多次，现在写一个统一回复。
在Angular中，templateURL或ng-include允许用户在运行时动态加载远程模板文件。作为Angular的内置功能，这似乎非常方便，但让我们重新考虑一下这种方式解决的问题。

是否有必要将html模板和js分离？

首先，它允许我们在一个单独的HTML文件中编写我们的模板。这在编辑器中给出了正确的语法高亮，这可能是为什么许多人喜欢这样做。但是分割您的JavaScript代码和模板真的是最好的方法吗？对于一个Vue.js组件，它的模板和它的JavaScript是紧密耦合的 - 实际上，如果事情只是在同一个文件，其实更简单。两个文件之间来回跳转的上下文切换实际上使得开发体验变得更糟。在概念上，组件是Vue.js应用程序的基本构建块，而不是模板。每个Vue.js模板都耦合到一个伴随的JavaScript上下文中 - 没有必要将它们分开。

本段大意是：将html模板和js分离，html有语法高亮、代码提示，开发体验好。但是因为html模板和js是紧密耦合的，把它们分开反倒不好。

templateURL会造成多次网络请求，导致加载缓慢

第二，因为templateURL在运行时通过Ajax加载模板，所以您不需要构建步骤来分割文件。这在开发过程中很方便，但是当您要将其部署到生产中时，这将会非常费力。在普遍支持HTTP / 2之前，HTTP请求的数量仍然是应用程序初始加载性能中最重要的因素。现在想象你使用templateURL对于您的应用程序中的每个组件 - 浏览器需要执行数十个HTTP请求，甚至可以显示任何内容！如果您不知道，大多数浏览器都会限制它可以对单个服务器执行的并行请求数。当您超过这个限制时，您的应用程序的初始渲染将受到浏览器等待的每次额外往返的影响。当然，有一些构建工具可以帮助您预先注册所有这些模板，$templateCache但是这给我们展示了一个构建步骤，实际上对于任何严重的前端开发来说是不可避免的。

正确姿势

那么，没有templateURL，我们如何处理开发体验问题？将模板作为内联JavaScript字符串编写是可怕的，伪造的模板<script type="x/template">也感觉像一个黑客。那么也许现在是游戏的一部分，并使用像Webpack或Browserify这样的正确的模块捆绑器。如果你以前从来没有处理过这件事，可能看起来很难，但是相信我是值得的。如果要构建任何大型和可维护的组件，则必须正确的模块化。更重要的是，您可以将Vue组件写入单个文件，具有适当的语法突出显示，以及自定义预处理器，热重新加载，ES2015默认情况下的自动翻译和范围CSS，从而使开发体验达到10倍以上的额外优势。

最后，Vue允许您懒惰加载您的组件，并且使用Webpack它很简单。虽然这只是一个问题，当你的初始捆绑是如此之大，以便你更好地分裂它分开。

综上，考虑使用组件，而不是模板。