importmapで依存関係を管理する

昨今のフロントエンド開発は、バンドル前提が主流になっている。

外部パッケージを含めたすべてのコードを、ひとつ、ないし数個のファイルにまとめて提供することで、依存関係の管理が容易になる。反面、頻繁に変更が入るコードとそうでないコードがひとつのファイルとして扱われるため、キャッシュができず、毎回大きなファイルを読み込むため、パフォーマンスが悪化するというデメリットがある。（chunkを使った場合はその限りではない）

ブラウザにはimportmapという仕組みが搭載され、依存関係（import元）を管理することができる。なお、<script defer>や<script asyc>といった属性は指定できない。

<script type="importmap">
  {
    "imports": {
      "moduleA": "/path/to/moduleA.js",
      "moduleB": "https://cdn.example.com/moduleB.js",
      "prefix/": "/path/to/prefix/"
    }
  }
</script>

import { moduleA } from 'moduleA'
import { moduleB } from 'moduleB'
import { prefix } from 'prefix/moduleC'

moduleA.doSomething()
moduleB.doSomething()

大規模なウェブアプリケーションでは、importmapを使って管理することは大変かもしれないが、ランディングページやペライチのような小規模なウェブページであれば、バンドラーを使わなくても管理できるかもしれない。