Cara Meningkatkan Prestasi Apl React Anda dengan Pemisahan Kod

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

2. Pemisahan Kod Mengikut Laluan
Untuk aplikasi yang lebih besar, pemisahan kod mengikut laluan adalah salah satu cara paling berkesan untuk meningkatkan prestasi. Perpustakaan seperti React Router menjadikan proses ini lancar.

Langkah 1: Pasang Penghala Reaksi

import React, { Suspense } from 'react';

// Lazy load the component
const LazyLoadedComponent = React.lazy(() => import('./LazyLoadedComponent'));

function App() {
  return (
    <div>
      <h1>React Code Splitting Example</h1>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyLoadedComponent />
      </Suspense>
    </div>
  );
}

export default App;

Langkah 2: Laksanakan Pemisahan Kod dengan Laluan

npm install react-router-dom

Kebaikan:

• Hanya JavaScript untuk laluan aktif dimuatkan.
• Mengurangkan saiz berkas awal.

3. Menggunakan Import Dinamik Webpack
Jika anda menggunakan Webpack sebagai pengikat modul anda, ia menyokong import dinamik di luar kotak. Webpack membahagikan kod kepada ketulan yang boleh dimuatkan secara dinamik.

Berikut ialah cara menggunakannya dalam apl React:

Contoh:

import React, { Suspense } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// Lazy load components for routes
const Home = React.lazy(() => import('./Home'));
const About = React.lazy(() => import('./About'));
const Contact = React.lazy(() => import('./Contact'));

function App() {
  return (
    <Router>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Suspense>
    </Router>
  );
}

export default App;

Cara ia Berfungsi:

• Webpack mencipta bahagian berasingan untuk HeavyComponent.
• Ketulan dimuatkan hanya apabila loadComponent() dipanggil.

4. Menganalisis Himpunan Anda dengan Webpack Bundle Analyzer
Sebelum melaksanakan pemisahan kod, adalah penting untuk memahami perkara yang menyumbang kepada saiz berkas anda. Webpack menyediakan alat yang dipanggil Bundle Analyzer untuk menggambarkan kandungan berkas anda.

Langkah 1: Pasang Webpack Bundle Analyzer

function loadComponent() {
  import('./HeavyComponent')
    .then((module) => {
      const Component = module.default;
      // Use the component here
    })
    .catch((error) => {
      console.error('Error loading the component:', error);
    });
}

Langkah 2: Konfigurasi Pek Web
Tambahkan pemalam pada konfigurasi Webpack anda:

npm install --save-dev webpack-bundle-analyzer

Langkah 3: Analisis Himpunan Anda

Jalankan arahan bina untuk menjana laporan:

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin(),
  ],
};

Penganalisis akan memaparkan peta pokok yang menunjukkan saiz setiap modul, membantu anda mengenal pasti peluang untuk pengoptimuman.

5. Menggunakan Perpustakaan Pihak Ketiga dengan Pemisahan Kod
Pustaka pihak ketiga yang besar (cth., lodash, moment.js) boleh menambah saiz berkas anda. Anda boleh membahagikan perpustakaan ini kepada bahagian berasingan atau menggunakan goncangan pokok untuk mengalih keluar bahagian perpustakaan yang tidak digunakan.

Contoh: Import Dinamik untuk Perpustakaan

npm run build

Contoh Menggoncang Pokok:
Daripada mengimport keseluruhan perpustakaan:

import('lodash')
  .then((_) => {
    const uniq = _.uniq([1, 2, 2, 3]);
    console.log(uniq);
  })
  .catch((error) => {
    console.error('Error loading lodash:', error);
  });

Amalan Terbaik untuk Pemisahan Kod

1. Mulakan dengan Pemisahan Berasaskan Laluan: Ini adalah cara paling mudah dan paling berkesan untuk mengurangkan masa muat awal.
2. Elakkan Pemisahan Terlalu Banyak: Terlalu banyak potongan boleh menyebabkan permintaan HTTP yang berlebihan.
3. Gabungkan Pemisahan Kod dengan Lazy Loading: Muatkan hanya perkara yang diperlukan untuk interaksi pengguna semasa.
4. Pantau Prestasi: Gunakan alatan seperti Rumah Api untuk mengukur peningkatan selepas melaksanakan pemisahan kod.
5. Gunakan Alat Binaan Moden: Alat seperti Webpack, Vite dan Parcel menawarkan sokongan terbina dalam untuk pemisahan kod.

Kesimpulan
Pemisahan kod ialah teknik pengoptimuman berkuasa yang boleh meningkatkan prestasi aplikasi React anda secara drastik. Dengan membahagikan apl anda kepada bahagian yang lebih kecil dan memuatkannya atas permintaan, anda boleh mengurangkan masa pemuatan awal, meningkatkan pengalaman pengguna dan menjadikan apl anda lebih cekap.

Mulakan dengan pemisahan berasaskan laluan dan kemudian percubaan dengan pemisahan peringkat komponen atau pustaka untuk menyesuaikan pengoptimuman dengan keperluan apl anda. Gabungkan pemisahan kod dengan teknik prestasi lain, seperti pemuatan malas dan gegar pokok, untuk memaksimumkan kecekapan apl React anda.

Atas ialah kandungan terperinci Cara Meningkatkan Prestasi Apl React Anda dengan Pemisahan Kod. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!