WebpackによるDynamic Import（実践編）

以前にWebpackでDynamic importを行ってみるという記事を書きましたが、実際に使ってみるとなると、文法以外に考える点がちょくちょく出てきました。

import()自体の書き方

まず、以前書いたように、実用的なimport()を行う上ではコメントを付けて細かな指示を出すことが必要となります。ということで、あちこちに直接import()を書いていては必要以上に煩雑になります。ということで、import()だけするファイルを作っておきましょう。

// Promise直出しの場合

export default import(/* webpackChunkName: "qiita" */'path/to/qiita');

// 関数を挟む場合

export default function importer(){
  return import(/* webpackChunkName: "qiita" */'path/to/qiita');
}

当然ながら、関数の中に入れた場合は関数を実行するまでimport()は実行されませんが、直接import()を書いた場合はファイル読み込みによってimport()がスタートします。

ファイル分割の粒度

HTTP/2での送信ならある程度マシになるかもしれませんが、ファイルを分けすぎてもファイル管理や通信コスト、オーバーヘッドなどを考えればマイナスとなりかねません。ある程度関連する機能をくくった上でまとめてexportするファイルを作って、それをimport()する形にするのがいいでしょう。

なお、import()の結果はPromiseのresolveへ引数として渡されます。default importであればdefaultキーとして、named importであればその名前のキーとして取れます（静的なimport/exportで行われる名前の最適化は行われません）。

どのようにコードを分割するか

どのようにコードを分割するかは、どのようなコードを書いているかによって大きく違ってきます。

たとえばSPAでは、画面単位で切り分けるのがいいでしょう。Reactには16.6でDynamic importをサポートする機能が入っていますので、それに沿うのが合理的かと思います。

あとは、

• クリックイベントでしか使われないルーチン
• ページ表示時にいきなり出すわけではないモーダル
• ファーストビューの際に通信しない場合の、通信用ライブラリ

など、ファーストビューで使わないものも遅延させてそこまで問題はありません。