Closed no-yan closed 3 years ago
各ページのスクリプトを、リンクをユーザーがクリックしたタイミングで取得するよう変更しました。これにより、はじめに配信されるJavaScriptのサイズが300kbから220kbに削減できました。
React.lazyとSuspenseの機能を使ってコード分割を実現しています（正確にはこうするとwebpackが勝手に分割してくれる）。 <Suspense fallback="">のfallbackを指定することでロード中の画面を指定することが出来ますが今は手抜きです。
<Suspense fallback="">
React.lazyがnamed import import {hoge} from 'hoge' に未対応なので、必要な部分をデフォルトインポートに変更しました
import {hoge} from 'hoge'
import React from 'react'
Reactはv17からJSXの変換にReact.createElementを使わなくなり、それに伴ってReactのimportが必要なくなりました https://ja.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
React.createElement
Eslint側が新しいjsx変換法にデフォルトで対応していないので設定を変更しました。 https://ja.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint おそらくこの変更の影響でprettierの動作がちょっと変わってしまい、app.tsxのコンポーネント内がシングルクォートからダブルクォートになってます。
React.FCは型定義でchildrenを定義しているので、VFCに変更しました。 （そこまで大きな問題点ではないですが）なにが問題になるかというと、childrenを持たないはずのコンポーネントのPropsにchildrenをもたせてもエラーが出ないことです。 もしFC型を使いながらchildrenが入るとエラーを出したいなら、type Props = {children: never;}とする必要があります。 VFCはchildrenが定義されていないReact.FCです。FCと全く同じ感覚で使うことができ、上記の点に関してエラーを出してくれます。 別にVFCを使えと強制するものではないです。
type Props = {children: never;}
当たり前かもですが、実験してみるとimport React from 'react'は消す前と消したあとでビルドサイズが変わりませんでした。デットコード削減だと思うので、今後は気にせずReact.FCとか使います。
コード分割
各ページのスクリプトを、リンクをユーザーがクリックしたタイミングで取得するよう変更しました。これにより、はじめに配信されるJavaScriptのサイズが300kbから220kbに削減できました。
React.lazyとSuspenseの機能を使ってコード分割を実現しています（正確にはこうするとwebpackが勝手に分割してくれる）。
<Suspense fallback="">のfallbackを指定することでロード中の画面を指定することが出来ますが今は手抜きです。デフォルトインポート
React.lazyがnamed import
import {hoge} from 'hoge'に未対応なので、必要な部分をデフォルトインポートに変更しました不要な
import React from 'react'を削除Reactはv17からJSXの変換に
React.createElementを使わなくなり、それに伴ってReactのimportが必要なくなりました https://ja.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.htmleslintを更新
Eslint側が新しいjsx変換法にデフォルトで対応していないので設定を変更しました。 https://ja.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint おそらくこの変更の影響でprettierの動作がちょっと変わってしまい、app.tsxのコンポーネント内がシングルクォートからダブルクォートになってます。
React.FCをVFCに変更
React.FCは型定義でchildrenを定義しているので、VFCに変更しました。 （そこまで大きな問題点ではないですが）なにが問題になるかというと、childrenを持たないはずのコンポーネントのPropsにchildrenをもたせてもエラーが出ないことです。 もしFC型を使いながらchildrenが入るとエラーを出したいなら、
type Props = {children: never;}とする必要があります。 VFCはchildrenが定義されていないReact.FCです。FCと全く同じ感覚で使うことができ、上記の点に関してエラーを出してくれます。 別にVFCを使えと強制するものではないです。追記
当たり前かもですが、実験してみると
import React from 'react'は消す前と消したあとでビルドサイズが変わりませんでした。デットコード削減だと思うので、今後は気にせずReact.FCとか使います。