Splittingを実装したのでその作業ログです。具体的には、S3などの静的サイトホスティング上で配信するサイト上で、hoge.com/page1のようなサブページにアクセスした後もSPAのような感覚でページ遷移できるようにしたいです。Splittingとは各ページで必要なjsファイルだけとってきてページ遷移するときに次のページで必要なjsファイルだけとってくるような構成を作ってみたかったので、やってみました。最初のアクセスでページのロード時間を短くしたいのです。スマホの回線環境とかだとSPAを開こうとしたときにたくさんページがある場合に初期表示に不要なファイルのロードも走るので時間がかかってしまいます。Splittingがあるので試してみました。成果物のソースコードはこちらに置きました。Splittingの仕組みフローとしては以下のイメージ。遷移先で必要になったjsファイルのみロード↓この画像がよくわかります。Splittingベストプラクティスがわからなかったんで、Reactの公式サイトを真似てみました。Componentsを使ったほうがサーバサイドレンダリングができて良いのでそっちを選びました。↓こんな感じでコンポーネントを読み込めば別々のjsファイルとしてバンドルしてくれます。import('./pages/Page2'));Routingにはreact-router-domを選びました。3年前にreact-routerを使ってたので浦島太郎状態でした。startを見ながら実装しました。↓こんな感じにしました。実際のコードはこちらです。document.querySelector("#app"));サブディレクトリ(/page2)に直接アクセスできない問題localhost:8888/page2とかにアクセスすると404が返ってきてしまう問題に当たりました。調べて、このサンプルにいきつきました。https://github.com/jeantimex/react-webpack-code-splittingwebpackの設定を自分のプロジェクトと比べてみると一つそれっぽいところをみつけました。devServer.historyApiFallbackのdisableDotRuleをtrueにしたらいけました。disableDotRuleパスでドット?どういうことだろう...?ただ、この方法だとawsのS3や静的サイトのホスティングサービスなんかでは使えません。ページごとのhtmlを用意してやる必要があります。HtmlWebpackPluginを使ってサブディレクトリにアクセス出来るようにするdevServer.historyApiFallbackを使わない方法を探してみるとHtmlWebpackPluginを使ってページごとのhtmlを生成する方法を見つけました。HtmlWebpackPluginはWebpackのビルド時にhtmlも生成するプラグインです。Webpackでバンドルしたjsファイルを読み込むコードを注入してくれます。これを使えば以下のような感じでページごとにディレクトリを切ってhtmlを出力できます。html-webpack-pluginwebpack.config.jsには下記のようにします。]}テンプレートとなるhtmlを用意します。今回は./src/index.htmlをテンプレートとして各ページのhtmlを出力します。id="app"></div></body></html>これが出来上がったhtmlです。bodyの末尾にjsファイルを読み込むコードが注入されています。SplittingができたSPAができました。kwst.site.。