React Code Splitting

  • Post
    React Code Splitting

    Aplikasi React memaketkan file mereka menggunakan alat seperti Webpack atau Browserfy . Bundling adalah proses yang mengambil banyak file dan menggabungkannya menjadi satu file, yang disebut bundle . Bundel ini bertanggung jawab untuk memuat seluruh aplikasi sekaligus di halaman web. Kita bisa memahaminya dari contoh di bawah ini.

    App.js

    1. import{ add } from ‘./math.js’;
    2. log(add(16, 26)); // 42

    math.js

    1. export function add(a, b) {
    2. return a + b;
    3. }

    Bundel file seperti di bawah ini:

    1. function add(a, b) {
    2. return a + b;
    3. }
    4. log(add(16, 26)); // 42

    Saat aplikasi kami berkembang, bundel kami juga akan berkembang, terutama saat kami menggunakan pustaka pihak ketiga yang besar. Jika ukuran paket menjadi besar, perlu waktu lama untuk memuat halaman web. Untuk menghindari bungkusan besar, ada baiknya mulai “membelah”. bundel Anda.

    React 16.6.0 , dirilis pada Oktober 2018 , dan memperkenalkan cara melakukan pemisahan kode. Pemisahan Kode adalah fitur yang didukung oleh Webpack dan Browserify, yang dapat membuat beberapa bundel yang dapat dimuat secara dinamis saat runtime.

    Pemisahan kode menggunakan alat / pustaka React.lazy dan Suspense , yang membantu Anda memuat dependensi dengan malas dan hanya memuatnya saat dibutuhkan oleh pengguna.

    Pemisahan kode meningkatkan:

    • Performa aplikasi
    • Dampaknya pada memori
    • Ukuran Kilobyte (atau Megabyte) yang diunduh

    React.lazy

    Cara terbaik untuk memecah kode ke dalam aplikasi adalah melalui sintaks import dinamis () . Fungsi React.lazy memungkinkan kita membuat impor dinamis sebagai komponen biasa.

    Sebelum

    1. importExampleComponent from ‘./ExampleComponent’;
    2. function MyComponent() {
    3. return (
    4. <div>
    5. <ExampleComponent />
    6. </div>
    7. );
    8. }

    Setelah

    1. constExampleComponent = React.lazy(() => import(‘./ExampleComponent’));
    2. function MyComponent() {
    3. return (
    4. <div>
    5. <ExampleComponent />
    6. </div>
    7. );
    8. }

    Potongan kode di atas secara otomatis memuat bundel yang berisi ExampleComponent ketika ExampleComponent dirender.

    Suspense

    Jika modul yang berisi ExampleComponent belum dimuat oleh komponen fungsi (MyComponent), maka kita perlu menampilkan beberapa konten fallback sambil menunggu untuk memuatnya. Kita bisa melakukan ini dengan menggunakan komponen ketegangan. Dengan kata lain, komponen suspense bertanggung jawab untuk menangani keluaran saat komponen lazy diambil dan dirender.

    1. constExampleComponent = React.lazy(() => import(‘./ ExampleComponent’));
    2. function MyComponent() {
    3. return (
    4. <div>
    5. <Suspense fallback={<div>Loading…</div>}>
    6. <ExampleComponent />
    7. </Suspense>
    8. </div>
    9. );
    10. }

    The fallback prop menerima Bereaksi elemen yang Anda ingin membuat sambil menunggu komponen beban. Kita bisa menggabungkan beberapa komponen malas dengan satu komponen Suspense. Itu bisa dilihat pada contoh di bawah ini.

    1. constExampleComponent = React.lazy(() => import(‘./ ExampleComponent’));
    2. constExamComponent = React.lazy(() => import(‘./ ExamComponent’));
    3. function MyComponent() {
    4. return (
    5. <div>
    6. <Suspense fallback={<div>Loading…</div>}>
    7. <section>
    8. <ExampleComponent />
    9. <ExamComponent />
    10. </section>
    11. </Suspense>
    12. </div>
    13. );
    14. }

    Catatan: Komponen React.lazy dan Suspense belum tersedia untuk rendering sisi server. Untuk pemisahan kode di aplikasi yang dirender server, disarankan untuk menggunakan Komponen yang Dapat Dimuat.

    Error boundaries

    Jika ada modul yang gagal dimuat, misalnya karena kegagalan jaringan, kami akan mendapatkan kesalahan. Kami dapat menangani kesalahan ini dengan Batas Kesalahan. Setelah kami membuat Batas Kesalahan, kami dapat menggunakannya di mana saja di atas komponen malas kami untuk menampilkan status kesalahan.

    1. importMyErrorBoundary from ‘./MyErrorBoundary’;
    2. constExampleComponent = React.lazy(() => import(‘./ ExampleComponent’));
    3. constExamComponent = React.lazy(() => import(‘./ ExamComponent’));
    4. constMyComponent = () => (
    5. <div>
    6. <MyErrorBoundary>
    7. <Suspense fallback={<div>Loading…</div>}>
    8. <section>
    9. <ExampleComponent />
    10. <ExamComponent />
    11. </section>
    12. </Suspense>
    13. </MyErrorBoundary>
    14. </div>
    15. );

     

    Route-based code splitting

    Sangat sulit untuk memutuskan di mana kami memperkenalkan pemisahan kode di aplikasi. Untuk ini, kami harus memastikan bahwa kami memilih tempat yang akan membagi bundel secara merata tanpa mengganggu pengalaman pengguna.

    Rute adalah tempat terbaik untuk memulai pemisahan kode. Pemisahan kode berbasis rute sangat penting selama transisi halaman di web, yang membutuhkan waktu lama untuk memuat. Berikut adalah contoh cara mengatur pembagian kode berbasis rute ke dalam aplikasi menggunakan React Router dengan React.lazy.

    1. import{ Switch, BrowserRouter as Router, Route} from ‘react-router-dom’;
    2. importReact, { Suspense, lazy } from ‘react’;
    3. constHome = lazy(() => import(‘./routes/Home’));
    4. constAbout = lazy(() => import(‘./routes/About’));
    5. constContact = lazy(() => import(‘./routes/Contact’));
    6. constApp = () => (
    7. <Router>
    8. <Suspense fallback={<div>Loading…</div>}>
    9. <Switch>
    10. <Route exact path=”/”component={Home}/>
    11. <Route path=”/about”component={About}/>
    12. <Route path=”/contact”component={Contact}/>
    13. </Switch>
    14. </Suspense>
    15. </Router>
    16. );

     

     

    Named Export

    Saat ini, React.lazy hanya mendukung ekspor default. Jika ada modul yang ingin Anda impor menggunakan ekspor bernama, Anda perlu membuat modul perantara yang mengekspor ulang sebagai default. Kita bisa memahaminya dari contoh di bawah ini.

    ExampleComponents.js

    1. export  const MyFirstComponent =  / * … * / ;
    2. export  const MySecondComponent =  / * … * / ;

    MyFirstComponent.js

    1. export { MyFirstComponent as default} from “./ExampleComponents.js”;

    MyApp.js

    1. importReact, { lazy } from ‘react’;
    2. constMyFirstComponent = lazy(() => import(“./MyFirstComponent.js”));

     

    credit. javatpoint

    Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Tagged: 

  • You must be logged in to reply to this topic.