使用 react-rails gem 删除 Rails 中的渲染阻塞 JavaScript

Question

我有一个 Ruby on Rails 应用程序。对于我的观点，我正在使用 react-rails gem。 我想通过 Google PageSpeed 提高页面速度。我的主要问题是 Remove Render-Blocking JavaScript 所以我在我的 javascript_include_tag 辅助方法中添加了 async: true 。然后，当我刷新站点时，我有空白的白色窗口浏览器，其中包含控制台内的这些消息：

ReferenceError: $ is not defined
   $(document).ready(ready);
ReferenceError: jQuery is not defined
   }(jQuery);

ReferenceError: jQuery is not defined
   })( jQuery );

ReferenceError: React is not defined
    this.About = React.createClass({

我的 applicaton.js 文件：

//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require react
//= require react_ujs
//= require semantic-ui
//= require components
//= reqiore custom
//= require_tree .

var ready;
ready = function() {

};

$(document).ready(ready);
$(document).on('page:load', ready);

我需要做什么才能删除阻塞的 javascript？

Answer 1

由于页面上的几乎所有内容都依赖于 JQuery，因此任何成功的页面呈现都需要加载 JQuery 才能启动。因此，根据我的经验，无法绕过阻塞 Javascript。

从用户的角度来看，投入大量工作来防止 JQuery 阻塞可能会允许 DOM 加载，但在 Jquery 和所有相关插件加载后，随着 DOM 被重写，它可能会做很多跳跃，使得体验比稍微长一点的页面加载更糟糕。

总的来说，我会集中精力确保您的 JQuery 以及所有相关的 JS 和 CSS 文件都通过 CDN 交付，因此您可以从与主域并行的第二个域中提取 HTTP 并确保您什么都不做打破 JQuery 和其他资产的浏览器缓存，以便它们不会阻塞后续请求。

编辑

我还想说的是，值得用预编译的资产进行测试（如果使用 CDN，这无论如何都是必要的），关闭资产实时编译以处理丢失的项目

config.assets.compile = false

这将防止任何丢失的资产导致令人困惑的延迟，以及在您上线后可能出现的无效编译。

关于从您的网络服务器提供资产的附加说明：

根据http://guides.rubyonrails.org/asset_pipeline.html

4.1.1 远期过期标头

预编译的资产存在于文件系统中，直接由 您的网络服务器。默认情况下，它们没有未来的标头，因此 获得指纹识别的好处，你必须更新你的服务器 添加这些标题的配置。

对于 Apache：

# The Expires* directives requires the Apache module
# `mod_expires` to be enabled.
<Location /assets/>
  # Use of ETag is discouraged when Last-Modified is present
  Header unset ETag
  FileETag None
  # RFC says only cache for 1 year
  ExpiresActive On
  ExpiresDefault "access plus 1 year"
</Location>

对于 NGINX：

location ~ ^/assets/ {
  expires 1y;
  add_header Cache-Control public;

  add_header ETag "";
  break;
}

最后，确保您在模拟最终生产环境的服务器上进行测试，因为 Rails 开发服务器不会提供相同的响应能力。