Cara Meningkatkan Prestasi Apl React Anda dengan Pemisahan Kod

Apabila aplikasi React berkembang dalam saiz dan kerumitan, saiz himpunan JavaScript mereka boleh memberi kesan ketara kepada prestasi, terutamanya pada rangkaian atau peranti yang lebih perlahan. Satu cara yang berkesan untuk mengurangkan isu ini ialah melalui pemisahan kod, teknik yang memecahkan aplikasi anda kepada bahagian yang lebih kecil. Bongkahan ini dimuatkan atas permintaan, mengurangkan masa pemuatan awal dan meningkatkan prestasi keseluruhan.

Dalam artikel ini, kami akan meneroka apa itu pemisahan kod, sebab ia penting dan cara melaksanakannya dengan berkesan dalam apl React.

Apakah itu Pemisahan Kod?
Pemisahan kod ialah strategi yang digunakan untuk membahagikan kod JavaScript anda kepada berkas yang lebih kecil yang boleh dimuatkan secara dinamik apabila diperlukan. Daripada menghantar satu fail JavaScript yang besar kepada penyemak imbas, pemisahan kod membolehkan anda menghantar hanya bahagian kod yang diperlukan serta-merta untuk interaksi pengguna. Ini mengurangkan masa pemuatan awal apl.

React menggunakan import dinamik dan alatan seperti Webpack untuk mendayakan pemisahan kod.

Faedah Pemisahan Kod

1. Masa Muatan Permulaan Dikurangkan: Hanya kod kritikal dimuatkan di hadapan.
2. Prestasi yang Dipertingkat: Himpunan yang lebih kecil dimuatkan dengan lebih pantas, terutamanya pada rangkaian yang perlahan.
3. Penggunaan Sumber yang Cekap: Sumber dimuatkan mengikut keperluan, meminimumkan kod yang tidak digunakan.
4. Pengalaman Pengguna yang Lebih Baik: Pengguna mengalami interaksi yang lebih pantas dengan apl anda.
5. Melaksanakan Pemisahan Kod dalam React

1. Menggunakan React’s React.lazy and Suspense
React menyediakan React.lazy untuk memuatkan komponen dengan malas dan Suspense untuk memaparkan UI sandaran semasa komponen yang dimuatkan malas sedang diambil.

Ini contohnya:
Langkah 1: Malas Muatkan Komponen

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;

Penjelasan:

• React.lazy(() => import('./LazyLoadedComponent')): Mengimport komponen secara dinamik hanya apabila ia diperlukan.
• Memuatkan...

}>: Memaparkan UI sandaran (cth., pemutar pemuatan) semasa komponen sedang dimuatkan.

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!