2

Ruby on Rails アプリがあります。私の見解では、react-rails gem を使用しています。Google PageSpeed でページ速度を改善したい。私の主な問題は、 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 を削除するにはどうすればよいですか?

4

1 に答える 1

1

ページ上の事実上すべてが JQuery に依存しているため、正常なページ レンダリングを開始するには JQuery をロードする必要があります。したがって、私の経験では、ブロッキング Javascript を回避する方法はありません。

ユーザーの観点からは、JQuery のブロックを防ぐために多くの作業を行うことで DOM をロードできるようになる可能性がありますが、DOM が書き換えられるため、Jquery と関連するすべてのプラグインがロードされた後に多くのジャンプが行われ、エクスペリエンスが悪化する可能性があります。わずかに長いページ読み込みよりも。

全体として、JQuery と関連するすべての JS および CSS ファイルが CDN を介して配信されるようにすることに注力します。これにより、プライマリ ドメインと並行して 2 番目のドメインから HTTP プルを利用できるようになり、ブラウザを壊すようなことがないようにすることができます。 JQuery およびその他のアセットをキャッシュして、後続のリクエストでブロックされないようにします。

編集

また、アセットをプリコンパイルしてテストする価値があることにも言及するつもりでした (CDN を使用する場合はとにかく必要です)。

config.assets.compile = false

これにより、アセットの欠落が原因で混乱を招く遅延が発生したり、公開後にコンパイルが無効になる可能性がなくなります。

Web サーバーからのアセットの提供に関する追加の注意事項:

http://guides.rubyonrails.org/asset_pipeline.htmlによると

4.1.1 遠い将来の Expires ヘッダー

プリコンパイル済みアセットはファイル システムに存在し、Web サーバーによって直接提供されます。デフォルトでは、遠い将来のヘッダーはありません。そのため、フィンガープリントの利点を得るには、サーバー構成を更新してそれらのヘッダーを追加する必要があります。

アパッチの場合:

# 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 開発サーバーは同じ応答性を提供しないため、最終的な運用環境を模倣するサーバーで実行をテストしてください。

于 2015-09-30T12:23:24.003 に答える