0

我的 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 个块，以便它可以更快地加载？这是可能的，甚至是正确的做法吗？

4

3 回答 3

1

没有什么不同的。如果你把它们分开，那么你仍然需要加载完全相同数量的 JS。

相反，可能会查看仅在特定页面上需要的脚本并将其提取出来并仅在相关页面上加载。

于 2013-04-20T21:03:04.423 回答
0

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

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

于 2013-04-20T18:58:38.913 回答
0

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

JavaScript 执行可以通过以下方式确定

  • 页面上存在独特元素或
  • HTML body 标签中的属性。

更有条理的方法是测试 HTML body 标签中的属性：

  • 在页面的 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：向 Rails 添加 Javascript”。阅读！

于 2013-04-20T23:19:11.673 回答