ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

reactのlazy load & suspenseを試してみた

javascript

ちょっとずつしか手が出せてなかったReact.jsをニートになったのを気に学び直している
その過程でReact.lazyとSuspense`をwebpackで試したのでそのログ

reactjs.org

tl;dr

コード自体はここに全部おいてある

github.com

動作チェック

動かすための方法はREADME.mdに書いてあるので、そちらを参照していただくとして
実行してページを開くと一瞬「Loading...」という文字が表示され、lazyロードしたComponentが読み込まれると「Happy Birthday Nogizaka46」*1という文字が表示されます

解説

パッケージについて

基本的には上記のgithubにおいてあるコードのpackage.jsonを見てもらうとして

今回dynamic importをしているので、babelでそれを扱うプラグインをインストールしている

babeljs.io

プロジェクトコード

componentをロードするときにReact.lazy(() => import(''))としてると、ファイルが分割されlazyロードすることができる

これで読み込んだcomponentを<Suspense>で囲うことで、dynamic import*2が読み込まれるまではfalllbackプロパティで指定した要素（今回の場合は「Loding...」という文字列）が表示され、ロードが終わるとcomponentが普通にレンダリングされる

import React, { Suspense } from 'react'

const Nogi = React.lazy(() => import(/* webpackChunkName: "Nogi" */'./Nogi'))

export default function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Nogi />
      </Suspense>
    </div>
  )
}

react-split-sample/App.js at master · yuzu-sandbox/react-split-sample · GitHub

まとめ

個人でやってるもののほんの一部に使っているだけで、Reactを仕事で使ったことがほぼなく、lazy loadが求められるほどパフォーマンスセンシティブなものを作ってないので、この対応がどこまで通用するのかはわからないがかなり簡単にコード分割が実現できるのでよかった

ただwebpackのこの辺↓と組み合わせるとどうなるのか気になるところなので、今度試したい

webpack.js.org

*1:お察しください https://twitter.com/yuzu_441/status/1098781354710294528

*2:要するにPromise