Cara Mempercepat Aplikasi Bereaksi Dengan Pemisahan Kode
Table of content:
Apakah aplikasi React Anda terlalu lambat atau terlalu lama dimuat? Jika demikian, Anda mungkin ingin menggunakan teknik yang dikenal sebagai pemecahan kode. Teknik ini sangat efektif untuk meningkatkan kecepatan memuat dan kinerja aplikasi React. Tapi apa itu pemecahan kode? Dan bagaimana cara melakukannya?
Apa itu Pemecahan Kode?
Aplikasi React umumnya terdiri dari lusinan komponen (dan kode). Tetapi Anda tidak perlu memuat sebagian besar komponen ini saat pertama kali memuatnya. Pemecahan kode memerlukan pemisahan bagian-bagian berbeda dari aplikasi Anda dan hanya memuatnya saat diperlukan. Ini jauh lebih efisien daripada memuat seluruh aplikasi sekaligus.
Pertimbangkan aplikasi React yang memiliki tiga halaman: beranda, halaman tentang, dan halaman produk. Saat Anda berada di beranda, tidak ada gunanya memuat halaman tentang atau halaman produk. Karena Anda belum benar-benar berada di halaman tersebut. Gagasan pemecahan kode adalah untuk memastikan Anda memuat kode hanya saat dibutuhkan.
Baca Juga:
Buka halaman web di browser web Anda, lalu buka DevTools (Anda dapat mengklik F12 di keyboard untuk membukanya di Google Chrome). Selanjutnya, buka tab Sumber. Di sana Anda akan menemukan semua kode yang diunduh saat Anda menavigasi ke halaman. Tanpa pemecahan kode, browser mengunduh semua file dalam proyek Anda saat halaman awal dimuat. Ini dapat memperlambat situs web Anda jika berisi banyak file.
Pemecahan kode menjadi sangat berguna saat proyek Anda mulai menjadi semakin besar. Ini karena mengunduh seluruh file aplikasi sekaligus bisa memakan waktu yang sangat lama. Jadi membaginya akan sangat bermanfaat.
Bagian terbaik tentang pemecahan kode adalah Anda dapat menunda pemuatan komponen dan juga fungsi. Panduan pengantar kami tentang ReactJS menjelaskan komponen dan fungsi secara mendalam jika Anda memerlukan penyegaran.
Fungsi Pemisahan Kode: Menggunakan Impor Dinamis
Pertimbangkan situasi berikut. Anda ingin beranda Anda memiliki tombol. Saat Anda mengklik tombol, Anda ingin mengingatkan jumlah 2 dan 2 (yaitu 4). Jadi Anda membuat Beranda.js komponen dan tentukan tampilan beranda Anda.
Dalam hal ini, Anda memiliki dua opsi. Pertama, Anda dapat mengimpor kode untuk menambahkan angka di bagian atas Beranda.js mengajukan. Tapi inilah masalahnya. Jika Anda mengimpor fungsi di bagian atas file, maka kode akan dimuat meskipun Anda belum mengklik tombolnya. Pendekatan yang lebih baik adalah memuat file jumlah() berfungsi hanya ketika Anda mengklik tombol.
Untuk mencapai ini, Anda harus melakukan impor dinamis. Ini berarti bahwa Anda akan mengimpor jumlah() fungsi sebaris di elemen tombol. Berikut kode untuk hal yang sama:
export default function Home() {
return (
<div className="Home">
<h1>HomePage</h1>
<button onClick={() => {
import("../sum.js").then((module) => {
alert(module.sum(2, 2))
})
}}
>
Sum both numbers
</button>
</div>
);
} Sekarang browser hanya akan mengunduh sum.js modul ketika Anda mengklik tombol. Ini meningkatkan waktu pemuatan beranda.
Komponen Pemecah Kode: Menggunakan React.lazy dan Suspense
Anda dapat membagi komponen di React menggunakan malas() fungsi. Tempat terbaik untuk melakukan pemecahan kode adalah di dalam router Anda. Karena ini adalah tempat Anda memetakan komponen ke rute di aplikasi Anda. Anda dapat membaca panduan kami tentang cara membuat aplikasi satu halaman dengan React Router jika Anda memerlukan penyegaran.
Misalkan aplikasi Anda memiliki Rumah, TentangDan Produk komponen. Ketika Anda berada di Rumah komponen, tidak ada gunanya memuat Tentang komponen atau Produk komponen. Jadi, Anda perlu memisahkannya dari Rumah rute. Kode berikut menunjukkan cara mencapainya:
Pertama, Anda perlu mengimpor fungsi dan komponen yang diperlukan dari reaksi Dan react-router-dom modul:
import { Routes, Route, Outlet, Link } from "react-router-dom";
import { lazy, Suspense } from "react";
Selanjutnya, Anda perlu mengimpor komponen secara dinamis menggunakan malas() fungsi:
const Home = lazy(() => import("./components/Home"));
const About = lazy(() => import("./components/About"));
const Products = lazy(() => import("./components/Products")); Selanjutnya, atur tata letak (menu navigasi). Menggunakan
function NavWrapper() {
return (
<>
<nav style={{ display: "flex", gap: "1rem" }}>
<Link to="https://www.makeuseof.com/">Home</Link>
<Link to="/about">About</Link>
<Link to="/products">Products</Link>
</nav>
<Suspense fallback={<h1>Loading...</h1>}>
<Outlet />
</Suspense>
</>
);
}
Anda dapat melihat bahwa kami membungkus komponen di dalamnya
Terakhir, atur rutenya:
export default function App() {
return (
<Routes>
<Route path="https://www.makeuseof.com/" element={<NavWrapper />}>
<Route path="https://www.makeuseof.com/" element={<Home />} />
<Route path="/products" element={<Products />} />
<Route path="/about" element={<About />} />
</Route>
</Routes>
);
}
Sekarang ketika Anda mengunjungi beranda, browser hanya memuat Beranda.js mengajukan. Dengan cara yang sama, ketika Anda mengklik Tentang tautan di menu navigasi untuk mengunjungi halaman Tentang, browser hanya memuat Tentang.js mengajukan. Ini sama untuk halaman Produk.
Pemisahan Kode Bersyarat
Seringkali Anda mungkin memiliki konten di halaman Anda yang hanya berlaku untuk pengguna tertentu. Misalnya, di beranda Anda, Anda dapat memiliki bagian dengan data admin yang eksklusif untuk pengguna admin. Ini bisa jadi dasbor admin yang muncul untuk pengguna admin, tetapi tidak untuk pengguna biasa.
Dalam hal ini, Anda tidak ingin menampilkan semua data itu setiap saat. Dalam hal ini, Anda dapat menggunakan teknik pemecahan kode untuk memastikan bahwa Anda hanya menampilkan informasi tersebut jika orang tersebut adalah admin.
Berikut tampilan kode tersebut:
import { lazy, Suspense } from "react";
const AdminData = lazy(() => import("./AdminData"));export default function Home() {
const [isAdmin, setIsAdmin] = useState(false)
return (
<div className="Home">
<h1>HomePage</h1>
<button onClick={() => setIsAdmin(prev => !prev)}>
Toggle Admin
</button>
<Suspense fallback={<h1>Loading...</h1>}>
{isAdmin ? <AdminData /> : <h2> Not the Admin </h2>}
</Suspense>
</div>
);
}
Sekarang, ketika Anda mengklik tombol sakelar, isAdmin akan diatur ke BENAR. Hasilnya, aplikasi akan menampilkan
Pemisahan kode bersyarat menggunakan konsep yang sama dengan rendering bersyarat di React.
Konsep Pemisahan Kode Tingkat Lanjut
Salah satu teknik lanjutan yang dapat Anda aktifkan saat memisahkan kode adalah transisi. Itu useTransition() hook memungkinkan Anda untuk melakukan pembaruan tidak mendesak yang tidak akan mengubah UI Anda sampai pembaruan selesai.
Pertama, Anda mengimpor pengait:
import {useTransition} from "react" Kemudian Anda memanggil pengait, yang kembali sedang menunggu Dan startTransition:
const [isPending, startTransition] = useTransition()
Terakhir, bungkus kode untuk memperbarui status Anda di dalamnya mulaiTransisi():
startTransition(() => {
setIsAdmin((prev) => !prev)
})
Sekarang UI Anda yang sebenarnya tidak akan menampilkan nilai mundur (memuat teks) hingga browser menyelesaikan transisi. Artinya, browser akan menunggu untuk mengunduh seluruh data admin sebelum mencoba menampilkan data sama sekali.
Cara Lain untuk Mengoptimalkan Performa React
Artikel ini membahas pemecahan kode sebagai metode untuk meningkatkan kinerja aplikasi React Anda. Tetapi ada beberapa metode lain juga yang dapat memberi Anda pengetahuan yang dibutuhkan untuk membuat aplikasi yang tangguh.
Artikel Terkait
