React 路由懒加载 相关配置

创好文件之后 现执行安装命令 如下：
cnpm i http-proxy-middleware customize-cra react-app-rewired @babel/plugin-proposal-decorators babel-plugin-import -S

创建一个和src同级的config-overrides.js文件

里面写上 一下代码 ⬇⬇

const {
addWebpackAlias, // 别名
addLessLoader, // 加载 less sass
fixBabelImports, // 按需加载 antd
override,
addDecoratorsLegacy, // 支持 修饰器
} = require(‘customize-cra’)

const path = require(‘path’)

module.exports = override(
// @ 修饰器
addDecoratorsLegacy(),
fixBabelImports(‘import’, {
libraryName: ‘antd’,
libraryDirectory: ‘es’,
// 支持 less sass stylus
style: true,
}),
// 支持 antd 主题定制
addLessLoader({
javascriptEnabled: true,
// modifyVars: styles,
}),
// 别名
addWebpackAlias({
‘@’: path.resolve(__dirname, ‘src’),
‘@@’: path.resolve(__dirname, ‘src/components’),
})
)

写完代码之后 打开package.json 覆盖"scripts"这个区域的代码

代码如下 ⬇⬇

“scripts”: {
“start”: “react-app-rewired start --open”,
“build”: “react-app-rewired build”,
“test”: “react-app-rewired test”,
“eject”: “react-app-rewired eject”
},

安装 cnpm i less-loader less -S 目的是 用@当作路径

再 安装cnpm i react-loadable -S 目的是安装需加载组件

再src 创建components文件夹 在从里面创建
Loadble文件夹 里的index.jsx文件

代码如下：

import React from ‘react’;
import Loadable from ‘react-loadable’

//默认的Loading

const LoadingComponent = () =>

loading

export default function (loader, loading = LoadingComponent) {
return Loadable({
loader,
loading,
})
}

接下来就能用@充当路径和 const Home = Loadable( () => import(’@/pages/home’))
以上的格式引入的组件

例如再 引入管理器（router文件夹下的components.js）中下一下代码

import Loadable from ‘@@/Loadable’

const Home = Loadable( () => import(’@/pages/home’))
const Login = Loadable( () => import(’@/pages/login’))
const Reg = Loadable( () => import(’@/pages/reg’))
export {
Home,
Login,
Reg
}