📐
Next.js の React を preact に差し替えるとどれくらいファイルサイズが減るのか？
preact が React より軽量らしいので実際にはかってみます
実際に試したコードのリポジトリはこちら
インストール
react
yarn add next react react-dom \
@types/node @types/react typescript @next/bundle-analyzer
preact
yarn add next preact preact-render-to-string \
github:preact-compat/react#1.0.0 github:preact-compat/react-dom#1.0.0 \
@types/node @types/react typescript @next/bundle-analyzer
ファイルサイズ
react
next build && next start して chrome でアクセスしてみる。
@next/bundle-analyzer で計測。
preact
next build && next start して chrome でアクセスしてみる。
@next/bundle-analyzer で計測。
まとめ
| transferred | chunks | |
|---|---|---|
| react | 522 kB | 416.92 KB |
| preact | 39.8 kB | 301.24 KB |
transferred が実際に Chrome でアクセスして確認したサイズで
chunks が @next/bundle-analyzer で All に表示されたサイズです。
@next/bundle-analyzer での計測結果にあまり差がないのは気になりますが
いずれにしても preact にした方がファイルサイズは小さくできそうです。
Discussion