Pengoptimuman Pantas untuk Aplikasi ReactJS anda untuk Prestasi dan Saiz

React yang digunakan secara besar-besaran untuk aplikasi intensif bahagian hadapan datang dengan cara prestasi dan pengoptimuman saiznya yang unik. Penambahbaikan kedua-duanya akan memberi kesan yang boleh diukur pada saiz bungkusan pakej React. Lebih kecil saiz berkas, lebih cepat masa pemuatan, memandangkan kami memfokuskan pada aplikasi yang diberikan pelanggan.

Pemarahan bahagian pelayan akan meningkatkan lagi masa muat. Dalam pemaparan sebelah pelayan apabila pengguna meminta halaman web, komponen React dipaparkan sebagai kod HTML dalam pelayan itu sendiri. Kemudian halaman pra-paparan ini dihantar ke penyemak imbas, membolehkan pengguna melihat halaman dengan serta-merta tanpa melebihi masa pemuatan JS.

Tetapi itu cerita yang berbeza sama sekali. Mari kita fokus terutamanya pada cuba memperbaik tapak yang diberikan oleh pihak pelanggan kami dengan berusaha meningkatkan saiz berkas Pakej dengan membuat tweak dalam kod. Mari menyelam lebih dalam.

1. Pemisahan Kod dan Import Dinamik

“Penghimpunan” kod React ialah proses mengikuti semua import dan kod dan menggabungkannya ke dalam satu fail yang dipanggil ‘Bundle’. Webpack, Browserify, dsb., sudah melakukan ini untuk kami.

Webpack mempunyai ciri yang dipanggil 'Code Splitting' yang bertanggungjawab untuk membahagikan satu berkas kepada bahagian yang lebih kecil, menyahgandakan bahagian tersebut dan mengimportnya 'atas permintaan'. Ini memberi kesan ketara pada masa muat aplikasi.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Komponen Lazy Loading dengan React Suspense (React 18): Ini digabungkan dengan import dinamik akan menunjukkan peningkatan yang ketara dalam masa Memuatkan Komponen.

Secara amnya, apabila kami mengimport komponen anak dalam komponen induk, kami mengimportnya secara statik. Untuk mengelakkan pengimportan komponen ini sehingga kita benar-benar perlu membuatnya, kita boleh menggunakan gabungan import dinamik dengan React Suspense. React Suspense membolehkan memuatkan komponen atas permintaan. Ia menunjukkan UI Fallback manakala komponen yang sepadan diimport secara dinamik dan kemudian dipaparkan.

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

2. Pokok Bergoncang

Ini ialah teknik yang digunakan oleh berkas JavaScript untuk mengalih keluar semua kod yang tidak digunakan sebelum membuat berkas. Kod ES6 boleh digoncang pokok; walau bagaimanapun, kod yang berasaskan daripada CommonJS (iaitu, penggunaan 'memerlukan') tidak boleh digoncang pokok.

Webpack Bundle Analyzer ialah pemalam yang akan membantu anda menggambarkan saiz pek web dengan peta interaktif.

npm install --save-dev webpack-bundle-analyzer
npm install -g source-map-explorer

Kemudian konfigurasikan pek web anda untuk menambahkan perkara di atas sebagai pemalam:

plugins: [
  new BundleAnalyzerPlugin(),
  new HtmlWebpackPlugin({
    template: './public/index.html', // Path to your HTML template
    filename: 'index.html', // Output HTML file name
    inject: true, // Inject all assets into the body
  }),
];

Pastikan skrip anda dikonfigurasikan untuk menjalankan Webpack:

"build": "webpack --config webpack.config.js --mode production"

Jalankan binaan benang untuk menjana report.html yang akan membantu anda menggambarkan saiz berkas anda dengan berkesan.

Ia akan kelihatan seperti ini:

3. Rendering Serentak

Mari kita mulakan dengan memahami apa itu Penyekatan Penyekatan. Menyekat pemaparan ialah apabila utas utama (kemas kini UX) disekat kerana React sedang melakukan beberapa tugas yang kurang penting di latar belakang. Ini pernah berlaku sehingga React 16.

React 18 telah memperkenalkan ciri serentak, yang bermaksud ia akan:

• Memberi anda lebih kawalan tentang cara kemas kini latar belakang dijadualkan dan akan mencipta pengalaman pengguna akhir yang lancar dengan tidak menyekat urutan utama.
• Mulakan kumpulan automatik kemas kini keadaan: Pengumpulan merujuk kepada pengumpulan berbilang pemaparan semula disebabkan oleh beberapa kemas kini keadaan dengan cara keadaan mengemas kini sekali sahaja.

Gunakan cangkuk startTransition() untuk mengurus kemas kini React sebagai tidak mendesak, membantu React mengutamakan kemas kini mendesak seperti input pengguna dan interaksi pengguna dengan komponen berbanding sebelumnya.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Dalam contoh ini, apabila nilai input berubah, fungsi handleChange dipanggil. Fungsi startTransition digunakan untuk menandakan kemas kini kepada keadaan senarai sebagai tidak mendesak. Ini membolehkan React mengutamakan kemas kini kepada keadaan nilai, memastikan input kekal responsif walaupun senarainya besar.

Gunakan cangkuk useDeferredValue untuk menangguhkan nilai (biasanya pengiraan mahal) sehingga UI kurang sibuk.

import { lazy } from 'react';

// The lazy loaded Component has to be exported as default
const BlogSection = lazy(() => import('./BlogSection.tsx'));

export default function HomePage() {
  return (
    <>
      <Suspense fallback={<Loading />}>
        <BlogSection />
      </Suspense>
    </>
  );
}

function Loading() {
  return <h2>Component is Loading...</h2>;
}

Dalam contoh ini, cangkuk useDeferredValue digunakan untuk menangguhkan keadaan nilai sehingga UI kurang sibuk. Ini membantu memastikan input responsif dengan menangguhkan pemaparan senarai besar sehingga selepas kemas kini input diproses.

Faedah Utama Rendering Serentak:

• Tingkat Responsif: Dengan membenarkan React mengganggu kerja pemaparan, UI kekal responsif kepada interaksi pengguna.
• Keutamaan: React boleh mengutamakan kemas kini yang mendesak berbanding yang tidak mendesak, memastikan pengalaman pengguna yang lebih lancar.
• Prestasi Lebih Baik: Kemas kini mahal boleh ditangguhkan, mengurangkan kesan pada urutan utama dan meningkatkan prestasi keseluruhan apl.

4. Sokong Pra-pemuatan Sumber (React 19)

Jika anda mengetahui sebarang sumber berat yang akan diambil oleh aplikasi anda semasa memuatkan, maka idea yang baik ialah pramuat sumber tersebut. Sumber ini boleh berupa fon, imej, helaian gaya, dsb.

Senario di mana pramuat akan memberi manfaat:

• Komponen kanak-kanak akan menggunakan sumber. Dalam kes itu, anda boleh pramuat ia semasa peringkat pemaparan komponen induk.
• Pramuatnya dalam pengendali acara, yang mengubah hala ke halaman/komponen yang akan menggunakan sumber ini. Ini sebenarnya, pilihan yang lebih baik daripada pramuat semasa pemaparan.

module.exports = {
  // Other webpack configuration options...
  optimization: {
    splitChunks: {
      chunks: 'all', // Options: 'initial', 'async', 'all'
      minSize: 10000, // Minimum size, in bytes, for a chunk to be generated
      maxSize: 0, // Maximum size, in bytes, for a chunk to be generated
      minChunks: 1, // Minimum number of chunks that must share a module before splitting
      maxAsyncRequests: 30, // Maximum number of parallel requests when on-demand loading
      maxInitialRequests: 30, // Maximum number of parallel requests at an entry point
      automaticNameDelimiter: '~', // Delimiter for generated names
      cacheGroups: {
        defaultVendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

Fakta menarik: Selepas melaksanakan pramuat, banyak tapak, termasuk Shopify, Financial Times dan Treebo, menyaksikan peningkatan 1 saat dalam metrik tertumpu pengguna seperti Masa untuk Interaktif dan Kependaman Ditanggap Pengguna.

---

Sila tinggalkan maklum balas <3

Saya harap anda mendapati blog ini membantu! Maklum balas anda tidak ternilai bagi saya , jadi sila tinggalkan pendapat dan cadangan anda dalam komen di bawah.

Jangan ragu untuk berhubung dengan saya di LinkedIn untuk mendapatkan lebih banyak cerapan dan kemas kini. Mari kekal berhubung dan terus belajar dan berkembang bersama!

Atas ialah kandungan terperinci Pengoptimuman Pantas untuk Aplikasi ReactJS anda untuk Prestasi dan Saiz. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!