使用 webpack 响应延迟加载模块

Question

I have a file called routes.js

 import Country from '../src/components/country/Country'; import Countries from '../src/components/country/CountriesList'; export const routes = [ { name: 'COUNTRY', children: [ { name: 'Create', path: '/country', component: Country, }, { name: 'Update', path: '/update-country', component: Country, isHidden: true, }, { name: 'View', path: '/countries', component: Countries, }, ], }, ]

In my app.js I import routes and do something like this

 <Switch> <Route path="/" exact component={Login}></Route> <Route path="/permission-denied" exact component={PermissionDenied}></Route> {routes .flatMap((items) => items.children) .map(({ component, path }) => ( <ProtectedRoute component={component} exact path={path} /> ))} <Route component={NotFound}></Route> </Switch>;

This works without errors! But I want to split my code to reduce my bundle size. How do I do it in routes.js file?

Answer 1

Very simple with react.lazy:

import { lazy } from 'react';

// just change these lines
const Country = lazy(() => import('../src/components/country/Country'));
const Countries = lazy(() => import('../src/components/country/CountriesList'));

export const routes = [
{
    name: 'COUNTRY',
    children: [
      {
        name: 'Create',
        path: '/country',
        component: Country,
      },
      {
        name: 'Update',
        path: '/update-country',
        component: Country,
        isHidden: true,
      },
      {
        name: 'View',
        path: '/countries',
        component: Countries,
      },
    ],
  },
]

NOTE: Make sure you have a Suspense component with a fallback prop somewhere in your tree above where you are rendering these components.

Like this:

import React, { Suspense } from 'react';


<Suspense fallback={<></>}>
    <Switch>
        <Route path="/" exact component={Login}></Route>
        <Route path="/permission-denied" exact component={PermissionDenied}></Route>

        {routes
            .flatMap((items) => items.children)
            .map(({ component, path }) => (
            <ProtectedRoute component={component} exact path={path} />
            ))}

        <Route component={NotFound}></Route>
    </Switch>
</Suspense>