Zenn
🖥

Nuxt リンク先のプリフェッチングをChromeDeveloperToolで確認する

2023/09/01に公開
tech

コード

pages/hello.vue

たくさんの改行の後にリンクがある

<template>
  <div>
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <NuxtLink to="/fun">Fun</NuxtLink>
  </div>
</template>

pages/fun.vue

テキストを表示するだけ

<template>
  <div>FUN FUN FUN!!!</div>
</template>

Chrome

リンクのあるページにアクセスする。
だがリンクが見えていない状態だと何も起きていない。

image.png

ページを下にスクロールすると .js ファイルに対して通信がおこなわれ、その中にリンク先の内容が含まれているのが分かる。

image.png

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

https://line.me/ti/g2/eEPltQ6Tzh3pYAZV8JXKZqc7PJ6L0rpm573dcQ

Twitter

https://twitter.com/YumaInaura

公開日時

2022-10-01

Discussion