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

共计 845 个字符，预计需要花费 3 分钟才能阅读完成。

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
});