Mengganti React dengan Preact pada NextJS
·
Qori El-Hafizh
Mengecilkan ukuran bundle JavaScript sangat penting. Hal itu akan membuat UX dan SEO lebih baik. Salah satu yang dapat dilakukan pada website berbasis NextJS adalah dengan menukar React dengan Preact.
Apa itu Preact?
Preact adalah library alternatif dari React yang lebih ringan. Preact memiliki API yang hampir seluruhnya kompatibel dengan React. Perbedaannya dapat dilihat di sini.
Instalasi
Pada projek nextjs tambahkan package berikut
pnpm add next-plugin-preact preact react@npm:@preact/compat react-dom@npm:@preact/compat react-ssr-prepass@npm:preact-ssr-prepass preact-render-to-string
Edit next.config.js
//tambahkan ini
const withPreact = require('next-plugin-preact');
/** @type {import('next').NextConfig} */
const nextConfig = // config project anda
// ganti dengan ini
module.exports = withPreact(nextConfig);
Build sebelum menggunakan Preact
➜ next-preact git:(main) pnpm build
> [email protected] build /home/q/Dev/web/next-preact
> next build
info - SWC minify release candidate enabled. https://nextjs.link/swcmin
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (3/3)
info - Finalizing page optimization
Route (pages) Size First Load JS
┌ ○ / 5.42 kB 83.3 kB
├ └ css/ae0e3e027412e072.css 707 B
├ /_app 0 B 77.9 kB
├ ○ /404 187 B 78.1 kB
└ λ /api/hello 0 B 77.9 kB
+ First Load JS shared by all 78.1 kB
├ chunks/framework-20d62dccc471813b.js 45.7 kB
├ chunks/main-68da70e92f0d3fbc.js 30.9 kB
├ chunks/pages/_app-91ececdeca538268.js 501 B
├ chunks/webpack-7ee66019f7f6d30f.js 755 B
└ css/ab44ce7add5c3d11.css 247 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
Build Sesudah menggunakan Preact
➜ next-preact git:(main) ✗ pnpm build
> [email protected] build /home/q/Dev/web/next-preact
> next build
info - SWC minify release candidate enabled. https://nextjs.link/swcmin
info - Linting and checking validity of types
info - Creating an optimized production build
info - Compiled successfully
info - Collecting page data
info - Generating static pages (3/3)
info - Finalizing page optimization
Route (pages) Size First Load JS
┌ ○ / 5.4 kB 46.2 kB
├ └ css/ae0e3e027412e072.css 707 B
├ /_app 0 B 40.8 kB
├ ○ /404 188 B 40.9 kB
└ λ /api/hello 0 B 40.8 kB
+ First Load JS shared by all 41 kB
├ chunks/framework-d7b1dd941aed8dca.js 8.59 kB
├ chunks/main-bba64e68922cf182.js 30.9 kB
├ chunks/pages/_app-1363a417001f738b.js 499 B
├ chunks/webpack-7ee66019f7f6d30f.js 755 B
└ css/ab44ce7add5c3d11.css 247 B
λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
○ (Static) automatically rendered as static HTML (uses no initial props)
Kesimpulan
Mengganti React dengan Preact dapat mengurangi bundle JS.
Pada React First Load JS shared by all adalah 78.1 kB sedangkan Preact hanya 41 kB.