FuCrowRabbit commented 1 month ago

現状ビルドしたassetsファイルは、hashなどが付かず同じファイル名で出力されます。そのためブラウザキャッシュが効いていた場合、反映に大きく時間が掛かる場合や思わぬ不具合が発生したりしてしまいます。

そこで、CSS/JS/画像等の名前解決時にクエリパラメータを自動的に付けて読みたいです。 https://qiita.com/osamu_0/items/ba117c745cededd2e177

import { Head, Picture } from "minista"

export default function () {
  return <>
    <Head>
      <link rel="stylesheet" href="/src/styles/style.scss" />
      <script defer type="module" src="/src/scripts/app.js" />
    </Head>
    <Picture src="/src/assets/image.png" formats={["webp", "inherit"]} />
  </>
}

build ↓

<head>
  <link rel="stylesheet" href="/assets/style.css?Cz4zGhbH" />
  <script defer="true" type="module" src="/assets/app.js?Bd-pKGJy"></script>
</head>
<picture>
  <img
    srcset="
      /assets/images/image-320x157.webp?CyIeDoTA    320w,
      /assets/images/image-400x196.webp?CyIeDoTB    400w,
      /assets/images/image-640x314.webp?CyIeDoTC    640w
    "
    sizes="(min-width: 640px) 640px, 100vw"
    width="640"
    height="1080"
    type="image/webp"
  />
  <img
    srcset="
      /assets/images/image-320x157.png?CyIeDoTD    320w,
      /assets/images/image-400x196.png?CyIeDoTE    400w,
      /assets/images/image-640x314.png?CyIeDoTF    640w
    "
    src="/assets/images/image-640x314.png?CyIeDoTF"
    sizes="(min-width: 640px) 640px, 100vw"
    width="640"
    height="1080"
    alt=""
    decoding="async"
    loading="lazy"
  />
</picture>

参考程度の情報です。 Viteのデフォルトではファイル名にハッシュが入りますが、クエリパラメータに変換するコードもあります。 https://stackoverflow.com/questions/76422980/vite-cache-busting-with-query-param-instead-of-file-name

qrac commented 1 month ago

@FuCrowRabbit ありがとうございます！

119 でもご指摘があり、v4でViteデフォルトのハッシュ出力に対応したので解決するかと思います。

例: href="/src/styles/style.scss" → /assets/style-Cz4zGhbH.css

FuCrowRabbit commented 1 month ago

ありがとうございます。こちらの確認不足で、既に実装されていることを確認しました。

qrac / minista

assetsファイルの読み込み時、クエリパラメータを自動的に付けてCacheBustingしたい #126

119 でもご指摘があり、v4でViteデフォルトのハッシュ出力に対応したので解決するかと思います。