Next.js の React を preact に差し替えるとどれくらいファイルサイズが減るのか?

公開:2020/12/24
更新:2020/12/27
1 min読了の目安(約1300字TECH技術記事

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 でアクセスしてみる

image

@next/bundle-analyzer で計測

image

preact

next build && next start して chrome でアクセスしてみる

image

@next/bundle-analyzer で計測

image

まとめ

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 にした方がファイルサイズは小さくできそうです

この記事に贈られたバッジ