#code spliting

webpackで単純にbundleを行なってしまうと、サイズの大きいファイルの場合、読み込みにかなりの時間を要してしまう。

それを避けるためには、ファイルを分割してbundleしておき、必要な時に読み込むようにすることで初期ロードを早くすることができる

基本的にはwebpackのcode splittingの部分を読むとわかる(https://webpack.js.org/guides/code-splitting/)

bundleを分割する方法はいくつかある

1. entryに分割するmoduleを指定しておいて、それぞれのファイルをbundleする方法

2. import()関数が使用されている箇所をwebpackがいい感じに分割してくれる方法

3. etc ... (今後追加する)

1について

moduleを指定する場合はSplitChunksPluginというpluginをいれて、optimization.splitChunks.chunks = "all"をしておかないと、共通で使われているmoduleがそれぞれのファイルにbundleされてしまい、かえってサイズが大きくなってしまう

2について

import()で読み込む場合は、output.chunkFilenameに指定のファイル名を入れて置く必要がある

moduleをimport()で読み込む際には様々なoptionがある(https://webpack.js.org/api/module-methods/#import-1)