コードを分割して初回読み込みをチューニングする手段の中の一つに
dynamic importというものがあります。
こちらは、あらかじめ読み込みたいファイルのみを読み込み、ボタンを押したときや
render時などの特定のタイミングで別のファイルを読み込ませるテクニックの一つです。
先に主要部分のファイルだけ読み込んでおけばユーザーを待たせることなく
、後でボタンをタップなどのアクションに合わせてコンポーネント
を出せばいいだけなのでかなりお手軽だなと思い実装。
ところが関数を作ってビルドをするとLoading chunk 0 failedで読み込みエラー発生。
原因は、app.jsのRouteで作成漏れでした。
Dynamic Importをするときは、必ず
</pre>
import Test from './test';
<HashRouter>
<Switch>
<Route exact path="/test" component={Test} />
</Switch>
</HashRouter>
<pre>
と定義する必要がありました。
後は主要ファイルの中で切り離したいコンポーネントを
以下のように組み立ててコンポーネントとして差し込めば
完成です。
</pre>
main.js
render() {
const SubConponent = Loadable({
loader: () => import('./subcomponent'),
loading: Loading,
});
return(
<SubConponent/>
);
}
<pre>
