ume

javascript The resource ファイル名 was preloaded using link preload but not used within a few seconds from the window's load event.

結論

javascriptcssなどの構文エラーが原因なので自分が書いたjsファイルの構文を見直す必要がある

エラーの意味

javascript The resource ファイル名 was preloaded using link preload but not used within a few seconds from the window's load event.

⇨プリロードされたリソースがページの load イベントから数秒以内に使用されなかったという意味。 つまりリソース(jsファイルや画像など)が何かの理由で使用できない状態になっている(構文エラーなど)

そもそもpreloaded(プリロード)とは ⇨ウェブページのパフォーマンスを向上させるために使用される技術の一つ。具体的には、ブラウザがページに必要なリソース(例:画像、スクリプトスタイルシートなど)を事前にダウンロードすることで、ページの読み込み速度を高める目的。

loadイベントとは.
⇨ ウェブページの全てのリソース(HTML、CSS、画像、JavaScriptなど)が正常に読み込まれた時点で発生するJavaScriptのイベント。つまり「ページ読み込み完了」を表す

私の場合のエラーの経緯

jqueryの動作確認をしようとしました。 そこで下記のhtmlファイルのpタグにclass(.edit)をつけてそのpタグがクリックされたら「テスト完了」とコンソールに出力しようとしました。 my_goal.html.slim pタグにclass(.edit)をつける

h1 =  "#{@user.name}さんの目標"

section 
  h2  = "あなたの#{@monthly_goal.goal_achieved_at.strftime('%Y年%m月%d日')}に達成する目標"
  p 
    = @monthly_goal.monthly_goal
  p.edit
    = link_to '編集'

javascript/packs/my_page.js に.editクラスがついているpタグ(編集というリンク)をクリックするとコンソールに「テスト完了」と表示する

$('.edit').on('click', () => {
  console.log("テスト完了")
});

↓結果エラーが出力されました。

my_page.jsのjqueryに構文ミスがあることに気づきました。

 $(document).on('turbolinks:load', function() {
$('.edit').on('click', () => {
  console.log("テスト完了")
});
});

このようにすると警告文が出ないようになりました。

この構文ミスは head内でjsファイルを読み込む際にターボリンクが有効になっている場合。( = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload')

jsファイルに↓を記載する必要があるのにしていなかったという構文ミスでした

 $(document).on('turbolinks:load', function() {

});

application.html.slim

doctype html
html
  head
    title
      | SharedGoalApp
    meta[name="viewport" content="width=device-width,initial-scale=1"]
    = csrf_meta_tags
    = csp_meta_tag
    = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
  body
    = render 'layouts/header'
    p.notice 
      = notice
    p.alert 
      = alert
    = yield