Reactのcode splitting用のライブラリとしてloadable-componentsが良かったので推していきたい
TL;DR
loadable-components is 良い。
まえがき
dynamic importを使ったcode splitngをする際、Reactだとラッパー的なものを実装しないといけなくて若干面倒がある。
ライブラリも存在しているのだが、reactの公式で紹介されているreact-loadableはissueが受け付けられてない状況になっていたりするのであんまり使いたくないなーと感じていた。
react-async-component / react-code-splittingもあったが、どちらも導入するほどの気持ちにならなかったので、だいたい自前になっていた。
「みんなどう思ってるんだろうなー」と何気なくissueをあさっていた所、loadable-componentsを見つけた。smooth-codeという会社が作っているらしい。
https://github.com/reactjs/reactjs.org/pull/573
https://github.com/smooth-code/loadable-components
これいいじゃん！って思ったので好きになった所を列挙していく
loadable-componentsの好きな所：コンセプトが良い
Motivationによると、メインのゴールとして
「なるべくAPIを減らして、開発者が簡単に扱えるようにすること」（意訳）
とある。
各ライブラリのREADMEの最初のコードとか比べてみると、「確かにシンプルだ」というのが見て取れた。
loadable-componentsの好きな所：READMEの丁寧さ
loadable-componentsのREADMEは、「やりたいことが網羅的に書いてて良い」と感じた。これは結構ポイント高い。
その上それぞれのコードがシンプルなのがまた素敵。
地味に一番「おお！これいい！」ってなったのはPrefetch on Hover。Hoverしたときにpreloadする機能 。 <Link onMouseOver={MyAsyncComponent.load} /> みたいな簡単な実装でprefetch出来るの滅茶苦茶良い
この機能はreact-loadableにも存在しているので独自というわけではない（が、この記事書くまで気づかなかった）
react-async-componentsには見つからなかった。こっちには無いのかも。
loadable-componentsの好きな所：コードが簡素できれい
結構機能充実してるんだろうし、コードやばいのでは？と思って覗いたらめっちゃ普通にキレイでビビった。多分何かしらでハマっても問題解決出来る気がする。
テストもばっちり。
loadable-componentsの好きな所：issueがある
OSS疲れみたいなのもあるので、issueを受け付ける受け付けないは作者の自由だけど、罠にハマった時にissueで解決出来る事も少なくないので、やっぱりissueはオープンな方がありがたい。
まとめ
ぶっちゃけcomponentのloadingなんてどれを選んでもそれほど変わるものではない。
が、その中でもシンプルな事はシンプルにできるし、複雑な事が必要なら複雑なことも十分出来るというところで良さを感じた。
しばらくはloadable-components推していきたいと思っている。
