create-react-app dynamic import 按需加载（懒加载）

create-react-app

目前 react-scripts 中的 webpack 版本是 3.8.1

react-app-rewired

中间涉及到修改 Babel 的配置，说以选择了它。

编辑routerMap

借鉴了下面这个做法。

webpack v3 结合 react-router v4 做 dynamic import — 按需加载（懒加载）

在项目根目录中 config-overrides.js 中添加

const { injectBabelPlugin } = require('react-app-rewired');

module.exports = function override(config, env) {
    // 就是这句
    config = injectBabelPlugin(['syntax-dynamic-import'], config);
    return config;
};

安装依赖

npm i --save-dev babel-plugin-syntax-dynamic-import

npm i --save react-loadable

添加 loading 组件

import React from 'react';

const MyLoadingComponent = ({ isLoading, error }) => {
    // Handle the loading state
    if (isLoading) {
        return <div>Loading...</div>;
    }
    // Handle the error state
    else if (error) {
        return <div>Sorry, there was a problem loading the page.</div>;
    }
    else {
        return null;
    }
};

需要异步加载的组件、路由组件

import Loadable from 'react-loadable';

const ProductList = Loadable({
    loader: () => import('../pages/product/list'),
    loading: MyLoadingComponent
});

转载请注明：OnlyLing - Web 前端开发者 » create-react-app dynamic import 按需加载（懒加载）