Question

我的application.js文件包含以下内容：

//= require jquery
//= require jquery_ujs
//= require jquery.ui.all
//= require bootstrap
//= require_tree .

它在我的javascript文件夹树中包含另外18个js文件。该文件变得非常大。

我使用多个cloudfront实例来提供我的其他资源（即图像），并注意到application.js最多可能需要一秒钟才能加载（即使在被gzip压缩之后）。

我怎样才能将application.js（以及application.css）分成4-5块，以便加载更快？这是可能的，甚至是正确的事情吗？

Answer 1

没有区别。如果你将它们拆开，那么你仍然需要加载完全相同数量的JS。

相反，可以查看仅在特定页面上需要的脚本并将其摘取并仅在相关页面上加载。

Answer 2

您可以删除所有jquery内容并单独加载它们。权衡是两个HTTP请求（或更多），而不是单个应用程序，但它可能是值得的。

或者您可以从谷歌的CDN加载jquery，如果用户已缓存，则可以节省更多时间。

Answer 3

通常编写JavaScript以与页面上的特定元素进行交互;如果是这样，浏览器将在每个页面上评估JavaScript，但只有在存在适当的页面元素时才激活它。您对该页面所需的JavaScript可以是站点范围的application.js脚本的一部分，也可以在视图模板或应用程序布局中使用javascript_include_tag语句包含在页面中。

JavaScript执行可以通过

确定

页面上存在唯一元素或
属性。

更有条理的方法是测试HTML正文标记中的属性：

在页面的body元素上设置class或id属性。
在JavaScript中使用解析这些类或ID的函数调用适当的函数。

首先，您必须修改应用程序布局。替换 app / views / layouts / application.html.erb 文件中的<body>语句：

<body class="<%= params[:controller] %>">

假设一个页面是由Projects控制器生成的，渲染的页面将包括：

<body class="projects">

在JavaScript代码中使用此条件：

$('document').ready(function() {
  if ($('body.projects').length) {
    console.log("Page generated by the projects controller.");
  }
});

（...来自RailsAppsProject, "Unholy Rails: Adding Javascript to Rails"。请阅读！

application.js很大 - 把它分开？

3 个答案: