Cara mempercepat aplikasi Next.js dengan strategi pemisahan kode dan pemuatan cerdas.
Apa yang akan Anda pelajari?
Postingan ini menjelaskan berbagai jenis kode pemisahan dan cara menggunakan impor dinamis untuk mempercepat aplikasi Next.js.
Pemisahan kode berbasis rute dan berbasis komponen
Secara default, Next.js membagi JavaScript Anda menjadi potongan-potongan terpisah untuk setiap rute. Saat pengguna memuat aplikasi Anda, Next.js hanya mengirim kode yang diperlukan untuk rute awal. Saat pengguna menavigasi aplikasi, mereka mengambil potongan yang terkait dengan rute lainnya. Pemisahan kode berbasis rute meminimalkan skrip yang perlu diurai dan dikompilasi sekaligus, yang menghasilkan waktu muat halaman yang lebih cepat.
Meskipun pemisahan kode berbasis rute adalah default yang baik, Anda dapat lebih mengoptimalkan proses pemuatan dengan pemisahan kode di level komponen. Jika Anda memiliki sebaiknya Anda membaginya menjadi potongan-potongan terpisah. Dengan begitu, setiap komponen besar yang tidak penting atau hanya dirender pada interaksi pengguna (seperti mengklik tombol) dapat dimuat dengan lambat.
Next.js mendukung import()
dinamis,
yang memungkinkan Anda mengimpor modul JavaScript (termasuk komponen React)
secara dinamis dan memuat setiap impor sebagai potongan terpisah. Hal ini memberi Anda
pemisahan kode di level komponen dan memungkinkan Anda mengontrol pemuatan resource sehingga
pengguna hanya mengunduh kode yang mereka
butuhkan untuk bagian situs yang
yang sedang mereka lihat. Di Next.js, komponen ini dirender sisi server
(SSR)
secara {i>default<i}.
Penerapan impor dinamis
Postingan ini menyertakan beberapa versi aplikasi contoh yang terdiri dari halaman web dengan satu tombol. Saat Anda mengklik tombol tersebut, Anda akan melihat anak yang lucu. Sebagai Anda menelusuri setiap versi aplikasi, Anda akan melihat bagaimana impor dinamis berbeda dari metrik statis impor dan bagaimana cara mengatasinya.
Di versi pertama aplikasi, anak tinggal di components/Puppy.js
. Kepada
menampilkan anak di halaman, aplikasi akan mengimpor komponen Puppy
di
index.js
dengan pernyataan impor statis:
import Puppy from "../components/Puppy";
Untuk melihat cara Next.js memaketkan aplikasi, periksa pelacakan jaringan di DevTools:
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh
.
Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Jaringan.
Centang kotak Disable cache.
Muat ulang halaman.
Saat Anda memuat halaman, semua kode yang diperlukan, termasuk Puppy.js
yang digabungkan dalam index.js
:
![Tab Jaringan DevTools menampilkan enam file JavaScript: index.js, app.js, webpack.js, main.js, 0.js, dan file dll (library link dinamis).](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/devtools-network-tab-show-c3449cc648185.png?authuser=19&hl=id)
Saat Anda menekan tombol Click me, hanya permintaan untuk puppy JPEG yang akan ditambahkan ke tab Jaringan:
![Tab Jaringan DevTools setelah klik tombol, menampilkan enam file JavaScript dan satu gambar yang sama.](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/devtools-network-tab-the-94b209c5e4e56.png?authuser=19&hl=id)
Kelemahan dari pendekatan ini adalah bahwa
bahkan jika pengguna tidak mengeklik tombol untuk
melihat anak anjingnya, mereka harus memuat
komponen Puppy
karena itu termasuk dalam
index.js
. Dalam contoh kecil ini, hal itu bukanlah masalah besar, tetapi di dunia nyata
sering kali merupakan peningkatan besar untuk
memuat komponen besar hanya ketika
diperlukan.
Sekarang lihat versi kedua aplikasi, di mana impor statis
diganti dengan impor dinamis. Next.js menyertakan next/dynamic
, yang membuatnya
dapat menggunakan impor dinamis untuk komponen apa pun dalam Berikutnya:
import Puppy from "../components/Puppy";
import dynamic from "next/dynamic";
// ...
const Puppy = dynamic(import("../components/Puppy"));
Ikuti langkah-langkah dari contoh pertama untuk memeriksa pelacakan jaringan.
Saat pertama kali memuat aplikasi, hanya index.js
yang didownload. Kali ini
0,5 KB lebih kecil (turun dari 37,9 KB menjadi 37,4 KB) karena
tidak menyertakan kode untuk komponen Puppy
:
![Jaringan DevTools menampilkan enam file JavaScript yang sama, kecuali index.js yang sekarang lebih kecil 0,5 KB.](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/devtools-network-showing-8cbd4309d29c5.png?authuser=19&hl=id)
Komponen Puppy
sekarang berada di potongan terpisah, 1.js
, yang hanya dimuat
ketika Anda menekan tombol:
![Tab Jaringan DevTools setelah klik tombol, menunjukkan file 1.js tambahan dan gambar yang ditambahkan ke bagian bawah daftar file.](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/devtools-network-tab-the-e42cc1846b47f.png?authuser=19&hl=id)
Dalam penerapan dunia nyata, komponen sering banyak lebih besar, dan pemuatan lambat dapat memangkas {i>payload<i} JavaScript awal Anda hingga ratusan kilobita.
Impor dinamis dengan indikator pemuatan kustom
Saat Anda memuat resource secara lambat, berikan indikator pemuatan
jika terjadi keterlambatan. Di Next.js, Anda dapat melakukannya dengan memberikan
argumen tambahan ke fungsi dynamic()
:
const Puppy = dynamic(() => import("../components/Puppy"), {
loading: () => <p>Loading...</p>
});
Untuk melihat cara kerja indikator pemuatan, simulasikan koneksi jaringan lambat di DevTools:
Untuk melihat pratinjau situs, tekan Lihat Aplikasi. Lalu tekan Layar penuh
.
Tekan `Control+Shift+J` (atau `Command+Option+J` di Mac) untuk membuka DevTools.
Klik tab Jaringan.
Centang kotak Disable cache.
Di menu drop-down Throttling, pilih 3G Cepat.
Tekan tombol Klik saya.
Sekarang, saat Anda mengklik tombol, perlu waktu beberapa saat untuk memuat komponen dan aplikasi menampilkan pesan "Memuat..." pesan pada saat itu.
![Layar gelap dengan teks](https://web.dev/static/articles/code-splitting-with-dynamic-imports-in-nextjs/image/a-dark-screen-the-text-914039a8f2589.png?authuser=19&hl=id)
Impor dinamis tanpa SSR
Jika Anda perlu merender komponen hanya di sisi klien (misalnya, chat
) Anda dapat melakukannya dengan menetapkan opsi ssr
ke false
:
const Puppy = dynamic(() => import("../components/Puppy"), {
ssr: false,
});
Kesimpulan
Dengan dukungan untuk impor dinamis, Next.js memberi Anda kode tingkat komponen terpisah, yang dapat meminimalkan payload JavaScript dan meningkatkan performa aplikasi waktu pemuatan. Semua komponen dirender di sisi server secara default dan Anda dapat nonaktifkan opsi ini bila diperlukan.