Zenn
🖥

Nuxt 3 – build で生成される assets (Javascript/CSSファイルなど) のランダムはハッシュは何なのか

2024/01/02に公開
Nuxt
Nuxt 3
tech

ハッシュ生成の確認

nuxt build でハッシュ付きのアセットファイルが標準出力される

あとは .output .nuxt 以下の生成されたファイルを直接見ると良いようだ

実際にどのファイルが使われているかは実際にサイトにアクセスして、ブラウザの開発者ツールでNetworksタブを見るなどすれば分かる

nuxt.config

nuxt.configでハッシュを消して固定化することも出来そうだが、ユーザのブラウザがJS/CSSなどをキャッシュしてしまい、状態が更新されない問題が起こりそう

vite: {
    build: {
      rollupOptions: {
        output: {
          chunkFileNames: '_nuxt/[name].js',
          assetFileNames: '_nuxt/[name][extname]',
          entryFileNames: '_nuxt/[name].js'
        }
      }
    }
  }

https://github.com/nuxt/nuxt/discussions/24623

ハッシュが変わるタイミング

localで試すとbuildのたびにハッシュが変わったり、Dockerで試すと「コードの状態が同じ限り同じハッシュ値が生成」されたり、
設定によっても挙動が変わったりとマチマチっぽく思える

設定がSSRかCSR(SPA)かによっても挙動が変わるのかもしれない

ビルドのたびにハッシュが変わるファイルもあれば、変わらないファイルもある

詳細は不明

チャットメンバー募集

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

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

Twitter

https://twitter.com/YumaInaura

公開日時

2023-12-13

Discussion