EagleLand

2017.11.26

ES Modulesを優先的にロードするmodulepreload

<link> 要素の rel 属性に、新しく modulepreload という値が ES Modules を先行してロードする仕様として追加され、Chrome 64 に実装された。リソースを先行してロードする手段としては既に <link rel="preload"> があり、スクリプトファイルには as="script" を指定すれば良いが、ES Modules をロードするためにはいくつか問題があり、新しく rel="modulepreload" が検討されている。

もとい <link rel="modulepreload"> にすべき理由が Preload and Modules に書かれている。

つまり Normal Script と Module Script を区別する必要アリということだ。

Module Preload は、Preload では実施しない Module Script が依存するモジュールの解決も行うことで、依存関係を探すレイテンシーを省ける。

  1. Module Script をロードし module map に追加する
  2. ゆくゆく必要になる依存モジュールのロードのために、ヒントとして記録する
  3. ユーザーからは見えない

ES Modulesが抱えるパフォーマンスの問題

現時点で ES Modules は、モジュールの数が多かったり、依存が深かったりするとパフォーマンス上で劣るという課題がある。もちろん実装の最適化はされていくと思うが。

対策案はいくつかありそうだが、この <link rel="modulepreload"> を使って優先的に Module Script をリクエストしておけば、モジュールをバンドルせずとも改善が見込める。