由create-react-app创建的react应用是将webpack的配置项隐藏的，可以让开发者在不需要做任何配置的情况下开发react，但有时候开发者也会需要有些特殊的需求
-
npm run eject将webpack抛出再自己添加配置以解决需求 - 通过
react-app-rewired以及customize-cra来解决特殊需求 - 正常的antd 按需加载 以及
lesssassalias等配置在网上都有大佬写出教程。 - 作为一个react 小白， 我就是很作。
我就是想在不抛出webpack配置的情况下来做到路由组件的按需加载，经过在网络的漫长搜索， 发现都是通过抛出webpack 的方式来做按需加载。
通过一番努力， 发现抛出方式都是在.babelrc的plugins上添加一个syntax-dynamic-import插件。 于是借此解决了在不抛出配置的情况下按需加载问题。解决如下：
const {override, addBabelPlugins, useBabelRc} = require('customize-cra');
module.exports = override(
addBabelPlugins(
["syntax-dynamic-import",{"legacy": true}],
),useBabelRc());
在组件中
import Loadable from 'react-loadable';
const MyLoadingComponent = ({isLoading, error}) => {
// Handle the loading state
if (isLoading) {
return <div>没有</div>;
}
// Handle the error state
else if (error) {
return <div>Sorry, there was a problem loading the page.</div>;
}
else {
return null;
}
};
const LoadableComponent = Loadable({
loader: () => import('/pages/index'),
loading: MyLoadingComponent
});
至此按需加载算是完成了
- 后来发现react更新后添加了两个新特性
Suspense, lazy可以直接通过引入这两个特性做到按需加载， 根本不需要上面那么麻烦的配置
import React, {Component, Suspense, lazy} from 'react';
const DynamicComponent = lazy (() => import('/pages/index'));
<Suspense fallback={<div>loading...</div>}>
<DynamicComponent />
</Suspense>
本文标题:create-react-app 路由按需加载
文章作者:黄洪涛
发布时间:2019年04月15日 - 23:04
最后更新:2019年04月15日 - 15:04
原始链接:https://hongtao-huang.github.io/react-create-react-app 路由按需加载/
许可协议: 署名-非商业性使用-禁止演绎 4.0 国际 转载请保留原文链接及作者。
