🥺

Viteのバックエンドとの統合でインクルード用HTMLを出力する

2021/10/17に公開

こちらのガイドではマニフェストファイルを書き出して、その内容をもとにテンプレートに埋め込む方法が書かれている。

<!-- 本番環境 -->
<link rel="stylesheet" href="/assets/{{ manifest['main.js'].css }}" />
<script type="module" src="/assets/{{ manifest['main.js'].file }}"></script>

別のやり方として、以下のようなHTMLファイルを出力して、それを読み込むようにしてみる。

<script type="module" crossorigin src="/assets/assets.a8735af4.js"></script>
<link rel="modulepreload" href="/assets/vendor.8bb1c963.js">
<link rel="stylesheet" href="/assets/assets.f50b62df.css">

やり方は簡単で、デフォルトのエントリーである index.html を真似して、以下の1行だけを書いた HTMLファイルを作成し、エントリーにこのファイルを指定するだけでよい。

assets.html

<script type="module" src="/src/main.tsx"></script>

vite.config.ts

export default defineConfig({
  ...
  build: {
    rollupOptions: {
      // overwrite default .html entry
      input: "assets.html",
    },
  },
  ...
});

Viteのガイドには

module preload polyfill を無効にしていない場合は、エントリで Polyfill をインポートする必要があります。

// アプリのエントリの先頭に追加
import 'vite/modulepreload-polyfill'

とあるが、以下の説明にあるとおり、HTMLをエントリーに指定する場合は関係ないので気にしなくて良い。

ビルドが build.rollupOptions.input を通して非 HTML のカスタムエントリを使用するように設定されている場合は、カスタムエントリで Polyfill を手動でインポートする必要があります

Discussion