Frontend Academy · Pelajaran

Pemisahan Kode dan Rute Lazy

Gunakan dynamic import() untuk membagi bundel pada batas rute, muat komponen React dan Vue secara lazy, dan pantau ukuran chunk dalam output build.

Pemisahan Kode dan Rute Lazy adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

Mengapa Memisahkan Kode?

Bundel JavaScript monolitik memaksa setiap pengunjung mengunduh setiap baris kode dalam aplikasi Anda—bahkan fitur yang tidak pernah mereka gunakan. Pemisahan kode memecah bundel menjadi beberapa bagian yang dimuat sesuai permintaan.

Dynamic import()

import('./module') mengembalikan Promise yang diselesaikan menjadi modul tersebut. Bundler (Vite, webpack) mengenali hal ini dan menghasilkan bagian kode terpisah yang dimuat saat runtime.

// Without split — entire heavy lib in main bundle:
import { generateChart } from 'heavy-chart-lib';

// With split — loaded only when needed:
button.addEventListener('click', async () => {
  const { generateChart } = await import('heavy-chart-lib');
  generateChart(data);
});

React.lazy() — Pemisahan Tingkat Komponen

React.lazy(() => import('./Heavy')) membuat komponen yang memuat kodenya hanya saat pertama kali dirender. Bungkus dengan <Suspense> untuk menampilkan tampilan cadangan selama pemuatan.

import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./Dashboard'));

function App() {
  return (
    <Suspense fallback={<Spinner />}>
      <Dashboard />
    </Suspense>
  );
}

Pemisahan Berbasis Rute di React Router

Setiap rute mendapatkan bagian kode sendiri—pengguna hanya mengunduh kode untuk halaman yang mereka kunjungi.

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import { lazy, Suspense } from 'react';

const Home    = lazy(() => import('./pages/Home'));
const Profile = lazy(() => import('./pages/Profile'));
const Admin   = lazy(() => import('./pages/Admin'));

const router = createBrowserRouter([
  { path: '/',        element: <Suspense fallback={<Spinner/>}><Home /></Suspense> },
  { path: '/profile', element: <Suspense fallback={<Spinner/>}><Profile /></Suspense> },
  { path: '/admin',   element: <Suspense fallback={<Spinner/>}><Admin /></Suspense> }
]);

Komponen Asinkron Vue 3

Vue menyediakan defineAsyncComponent untuk pola yang sama.

import { defineAsyncComponent } from 'vue';

const Dashboard = defineAsyncComponent(() =>
  import('./Dashboard.vue')
);

// Use in template like a normal component

Rute Lambat Vue Router

Vue Router mendukung impor dinamis dalam definisi rute—bagian kode dibuat untuk setiap rute.

const routes = [
  { path: '/',        component: () => import('./pages/Home.vue') },
  { path: '/profile', component: () => import('./pages/Profile.vue') },
  { path: '/admin',   component: () => import('./pages/Admin.vue') }
];

Komentar Ajaib Webpack

Berikan petunjuk tentang nama bagian kode dan perilaku pramuat melalui 'komentar ajaib' webpack di dalam pernyataan impor.

const Profile = lazy(() =>
  import(/* webpackChunkName: "profile", webpackPrefetch: true */ './Profile')
);

// Vite supports a subset; @vite-ignore for special cases

Prefetch vs Preload

prefetch: unduh bagian kode selama waktu senggang untuk navigasi yang kemungkinan besar dilakukan berikutnya. preload: unduh sekarang dengan prioritas tinggi untuk bagian kode kritis pada rute saat ini. Gunakan prefetch saat kursor diarahkan ke tautan, dan preload untuk kebutuhan yang akan segera terjadi dan sudah diketahui.

Penganalisis Bundel

Gunakan rollup-plugin-visualizer (Vite) atau webpack-bundle-analyzer untuk memvisualisasikan ukuran bagian kode. Perhatikan: bagian kode yang terlalu besar, dependensi duplikat, dan pustaka yang lupa Anda hilangkan dari tree-shaking.

// vite.config.ts
import { visualizer } from 'rollup-plugin-visualizer';

export default {
  plugins: [visualizer({ open: true, gzipSize: true })]
};

Pemisahan Bagian Kode Vendor

Pisahkan pustaka pihak ketiga ke dalam bagian kode vendor terpisah yang lebih jarang berubah daripada kode aplikasi Anda—peramban dapat tetap menyimpannya dalam tembolok setelah penerapan baru.

// vite.config.ts
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          react: ['react', 'react-dom'],
          ui: ['@radix-ui/react-dialog', '@radix-ui/react-tooltip']
        }
      }
    }
  }
};

Kapan NOT Memisahkan Kode

Bagian kode kecil (di bawah 20 KB) lebih banyak merugikan daripada membantu—beban tambahan HTTP melebihi penghematan bundel. Jangan memisahkan setiap komponen; lakukan pemisahan pada batas rute dan di sekitar fitur yang benar-benar berat.

Pemeriksaan Singkat

Dengan apa pembungkus lazy() milik React perlu dipasangkan agar dapat dirender dengan benar?

Ringkasan: Pemisahan Kode

Dynamic import() menghasilkan bagian kode terpisah. React.lazy + Suspense digunakan untuk pemisahan komponen. Gunakan komponen rute lambat di React Router atau Vue Router. Gunakan prefetch untuk bagian kode yang kemungkinan dimuat berikutnya, dan preload untuk bagian yang kritis. Penganalisis bundel mengungkap pemborosan. Pisahkan pustaka vendor agar dapat disimpan dalam tembolok. Hindari bagian kode sangat kecil di bawah 20 KB.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Pemisahan Kode dan Rute Lazy” gratis?

Ya — teks lengkap “Pemisahan Kode dan Rute Lazy” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Pemisahan Kode dan Rute Lazy”?

Gunakan dynamic import() untuk membagi bundel pada batas rute, muat komponen React dan Vue secara lazy, dan pantau ukuran chunk dalam output build. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Pemisahan Kode dan Rute Lazy” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Core Web Vitals: LCP, FID, CLS
Audit dan Penilaian Lighthouse
Optimasi Gambar: lazy loading, format WebP
Pemisahan Kode dan Rute Lazy

← Kembali ke Frontend Academy