ということで、前々回書いた通りSSR(Server Side Rendering)したくない派ですが、CSRの問題は解決したいので今回は初期ロード時間対策でCode Splittingを試してみます。
基本的なことしか試さないので、一度も試したこと無い人向け程度の内容かと思います。
Code Splitting
この記事で言うCode Splittingはこのproposalにあるdynamic importを使ったCode Splittingのことです。react-routerを使った場合にrouteごとにjsファイルを分けることで、初期ロード時に1つの大きなバンドルされたjsファイルを読み込むのではなく、それぞれのrouteごとに必要最小限のjsファイルを読み込むことで初期ロード時間を低下させることを目的としたものです。(Routeは今回のデモのための例で、Route以外の用途にも使うことももちろん可能です)
ちなみにreact-routerのオフィシャルページだとdynamic importではなくbundle-loaderを使った方法が紹介されてます。今回はcreate-react-appを使いますが、bundle-loaderを使うにはejectするかイチからwebpackのファイルを作らないといけないので、bundle-loaderを使ったやり方はあとで試し次第追記します。
手順
手抜きですが前回書いたNetlifyの記事で作ったアプリの続きからやります。
create-react-appのページによると既にdynamic importは有効になっているので、特に何かを入れる必要はありません。
前述の通り公式だとdynamic importを使った方法は紹介されていないので、今回はこの記事を参考にさせて頂きました。
なお例によってコードはGitHubに上げました。
非同期読み込み用のコンポーネントを作る
まずはこんな感じのコンポーネントを作ります。
import React from 'react';
export default (loader, collection) => (
class AsyncContainer extends React.Component {
constructor(props) {
super(props);
this.state = { Container: AsyncContainer.Container };
}
componentWillMount() {
if (!this.state.Container) {
loader().then((Container) => {
this.setState({ Container });
});
}
}
render() {
if (this.state.Container) {
return (
<this.state.Container { ...this.props } { ...collection } />
)
}
return null;
}
}
);
それぞれのRouteを作る
普通にRouteを作れば良いだけです。基本的には前回と同じなので省略します。
それぞれのRouteを非同期読み込みをする
Routeを記載するところで以下のように読み込めばOKです。
import AsyncContainer from './containers/AsyncContainer';
const Home = AsyncContainer(() => import('./containers/Home')
.then(module => module.default), { name: 'This is our Home page' });
const About = AsyncContainer(() => import('./containers/About')
.then(module => module.default), { name: 'This is our About page' });
(省略)
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
確認
ファイルサイズ確認
前回普通に作ったものと今回Splittingしたもののファイルサイズを比べてみます。
- 前回
- 今回
今回のほうが若干大きい(多分AsyncContainerの分)ですが、分割できてることは確認できました。
一部のRouteのみでmomentを読み込んでファイルサイズ確認
上記の結果だけだと分かりにくいので、比較的サイズの大きいライブラリとしてmomentを/aboutでのみ読み込んでサイズを比べてみます。
yarn add momentしてからAbout.jsで以下のようにてきとーにmomentを呼び出してみます。
import moment from 'moment';
(省略)
<span>moment().format()</span>
で、一旦AsyncContainerを外してbuildするとこんな感じのサイズになりました。
再びAsyncContainerを有効にしてbuildするとこんな感じでした。
Code Splittingしてない方はmainのjsしか生成されずmoment追加前と比べて50K増えています。Splittingした方はmainのjsのサイズはmoment追加前とほとんど変わらず、chunkファイルのうち1つが50K増えています。1つのファイルにバンドルされないので、初期ロード時間を低減することができそうです。
デプロイして確認
ということで、これをNetlifyにデプロイして確認してみます。
(てゆーか、Netlifyってデモだとめっちゃ便利。。。)
まずはルート(/)にアクセスしてDev Toolで確認すると
2つのjsファイルのみ読まれています。
次にmomentを使っている/aboutにアクセスすると
追加でもう1ファイル読まれました。
初期ページ用のjsファイルがgzipされた状態で60KB程度ならReactアプリとしては悪くないんじゃないでしょうか。
実際のアプリだともう少し増えたとしても100KB以下には抑えられる気がします。
Google Search Consoleで確認
一応Google Search Consoleでも確認してみますが、以下の通りちゃんと/aboutのページが正しく表示されています。
- 追記(2017/06/28) - Search Consoleからの結果はプリレンダリングしないでもOKでした。また、reduxからネットワークリクエスト送ってから結果を表示するようなケースでも(プリレンダリング無しでも)大丈夫でした。以下のSlackで確認のところはもちろんプリレンダリング無いとダメです。
Slackで確認
スクショは前回と同じなので省略しますが、今回の対応で前回入れたOGP対応が壊れたりすることもありませんでした。
最後に
ということで、Code Splittingを試してみました。これで初期ロードに時間がかかる問題にもある程度は対応できそうです。
別記事に書いた(&書く予定の)SEO/OGP対応と合わせれば、従来のCSRで言われていた問題は回避できるので、自分のプロジェクトではアーキテクチャ的にあまり有り難くないSSRを選択する必要はなくなりそうです。
先に書いた通りbundle-loaderも試したら追記しようと思います。
また実戦投入して知見が溜まったら追記等したいと思います。
参考になれば幸いです。