ember.js 加载多个 css 和 js 文件的最佳方式答案

【问题标题】：ember.js best way to load multiple css and js filesember.js 加载多个 css 和 js 文件的最佳方式
【发布时间】：2014-08-27 15:56:03
【问题描述】：

我正在创建一个 ember 应用程序。现在我正在加载 index.html 文件中的所有 js 和 css 文件，如下所示：

<link type="text/css" rel="stylesheet" href="assets/css/gumby.css" media="all" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global.css" media="all" />
<link type="text/css" rel="stylesheet" href=assets/css/tooltipster.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/jquery.fancybox.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/about.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/admin.css" media="screen" />
<link type="text/css" rel="stylesheet" href="assets/css/pages/global_print.css" media="print" />

js 文件：

<script src="assets/js/libs/jquery-1.9.0.min.js"></script>
<script src="js/libs/handlebars-1.1.2.js"></script>
<script src="js/libs/ember-1.6.1.js"></script>
<script src="js/libs/ember-data.js"></script>
<script src="js/app.js"></script>
<script src="js/router.js"></script>
<script src="js/account.js"></script>
<script src="js/message.js"></script>
<script src="js/user.js"></script>
<script src="js/inquiry.js"></script>

我知道在应用程序启动时加载所有 js 和 css 文件不是最佳做法。我想知道其他人如何为他们的应用程序做些什么以及最好的方法是什么。

【问题讨论】：

最佳实践并没有说明在应用程序启动时不加载它们。明智的做法是捆绑 javascript 和 css 文件，以减少对服务器的调用。

标签： javascript css ember.js bundle bundling-and-minification

【解决方案1】：

我相信普遍接受的方法是样式表位于顶部，javascript 依赖项位于底部，这似乎是您组织它的方式。

除了您在文件中的 WHERE 请求这些文件之外，请记住，每个单独的脚本或链接标记都是对服务器的单独回调。来回 17 次，不包括图像等，对您的用户来说可能是一个真正的减速带。

您是否考虑过在您的项目中使用 Ember-CLI？ (http://www.ember-cli.com) 它让这样的事情变得更容易了。它将为您捆绑所有库和样式表，并为您节省大量时间。如果您对样式表或 javascript 使用预处理器，则更是如此。

如果您不那么倾向于使用 Ember-CLI，有多种实用程序和网站可以为您压缩依赖项。

【讨论】：