Frontend Academy · Pelajaran

Pemisahan Kod dan Laluan Malas

Gunakan dynamic import() untuk memisahkan bundle pada sempadan laluan, muatkan komponen React dan Vue secara malas, dan pantau saiz cebisan dalam output binaan.

Pelajaran 4 daripada 413 langkah

Pemisahan Kod dan Laluan Malas ialah pelajaran Frontend Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Frontend Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Mengapa Membahagikan Kod?

Himpunan JavaScript monolitik memaksa setiap pelawat memuat turun setiap baris kod dalam aplikasi anda — termasuk ciri yang tidak pernah mereka gunakan. Pembahagian kod memecahkan himpunan kepada bahagian yang dimuatkan atas permintaan.

Dynamic import()

import('./module') mengembalikan Promise yang diselesaikan kepada modul tersebut. Penghimpun (Vite, webpack) mengenal pasti perkara ini lalu menghasilkan bahagian berasingan yang dimuatkan pada masa jalan.

// 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() — Pembahagian pada Tahap Komponen

React.lazy(() => import('./Heavy')) mencipta komponen yang memuatkan kodnya hanya apabila dipaparkan buat kali pertama. Balut komponen itu dalam <Suspense> untuk memaparkan sandaran semasa pemuatan.

import { lazy, Suspense } from 'react';

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

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

Pembahagian Berasaskan Laluan dalam React Router

Setiap laluan mendapat bahagiannya sendiri — pengguna hanya memuat turun kod untuk halaman yang mereka lawati.

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 Tak Segerak Vue 3

Vue menawarkan defineAsyncComponent untuk corak yang sama.

import { defineAsyncComponent } from 'vue';

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

// Use in template like a normal component

Laluan Malas Vue Router

Vue Router menyokong import dinamik dalam takrifan laluan — bahagian dihasilkan bagi setiap laluan.

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

Komen Ajaib Webpack

Berikan petunjuk tentang nama bahagian dan tingkah laku prapungut melalui 'komen ajaib' webpack di dalam pernyataan import.

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

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

Prapungut berbanding Pramuat

prefetch: muat turun bahagian semasa masa melahu, untuk navigasi yang berkemungkinan berlaku seterusnya. preload: muat turun sekarang dengan keutamaan tinggi, untuk bahagian kritikal laluan semasa. Gunakan prefetch apabila pautan dituding dan preload untuk keperluan yang diketahui akan berlaku tidak lama lagi.

Penganalisis Himpunan

Gunakan rollup-plugin-visualizer (Vite) atau webpack-bundle-analyzer untuk memvisualkan saiz bahagian. Cari perkara berikut: bahagian yang terlalu besar, kebergantungan pendua dan pustaka yang terlupa untuk dikecilkan melalui tree-shaking.

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

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

Pembahagian Bahagian Pembekal

Bahagikan pustaka pihak ketiga kepada bahagian pembekal berasingan yang berubah kurang kerap berbanding kod aplikasi anda — pelayar boleh menyimpannya dalam cache merentas pelancaran.

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

Bila NOT Perlu Membahagi

Bahagian kecil (di bawah 20KB) lebih banyak mendatangkan mudarat daripada manfaat — overhed HTTP melebihi penjimatan himpunan. Jangan bahagikan setiap komponen; bahagikan pada sempadan laluan dan di sekitar ciri yang benar-benar berat.

Semakan Pantas

Pembungkus lazy() React perlu digandingkan dengan apa supaya dapat dipaparkan dengan betul?

Jawab dalam pelajaran interaktif

Ulang Kaji: Pembahagian Kod

Dynamic import() menghasilkan bahagian berasingan. React.lazy + Suspense digunakan untuk pembahagian komponen. Gunakan komponen laluan malas dalam React Router/Vue Router. Gunakan prefetch untuk bahagian yang berkemungkinan diperlukan seterusnya dan preload untuk bahagian kritikal. Penganalisis himpunan mendedahkan pembaziran. Bahagikan pustaka pembekal untuk kebolehcapaian cache. Elakkan bahagian mikro di bawah 20KB.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 41
Pelajaran: 163

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pemisahan Kod dan Laluan Malas” percuma?

Ya — teks penuh “Pemisahan Kod dan Laluan Malas” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Frontend Academy, tingkat taraf kepada CoddyKit PRO. Kursus Frontend Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Pemisahan Kod dan Laluan Malas”?

Gunakan dynamic import() untuk memisahkan bundle pada sempadan laluan, muatkan komponen React dan Vue secara malas, dan pantau saiz cebisan dalam output binaan. Anda berlatih Frontend Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Frontend Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Frontend Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “Pemisahan Kod dan Laluan Malas” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Vital Web Teras: LCP FID CLS
Audit dan Pemarkahan Lighthouse
Pengoptimuman Imej: pemuatan malas format WebP
Pemisahan Kod dan Laluan Malas

← Kembali ke Frontend Academy