📐

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

2020/12/24に公開約1,700字

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

GitHubで編集を提案

Discussion

ログインするとコメントできます