react按需加载路由reactloadable

按需加载路由可以减去不必要运行&＃xff0c;比如我们首次打开某个页面&＃xff0c;我们只打开了一个路由&＃xff0c;如果我们配置了按需加载&＃xff0c;当前页面只会加载这个路由&＃xff0c;如果没有配置的话&＃xff0c;会发现我们进入到某个路由时&＃xff0c;其他不相关的路由也已经加载&＃xff0c;这样会大大增加项目运行速度&＃xff0c;话不多说&＃xff0c;直接看代码:
记得下载此模块 cnpm i react-loadable --save

• 定义路由懒加载工具

// 路由懒加载的工具类&＃xff08;我的项目懒加载类是放在utiles -> loadable.js下&＃xff0c;utils也是自己配置的工具类文件夹&＃xff09;
import React from &＃39;react&＃39;
import Loadable from &＃39;react-loadable&＃39;
import styles from &＃39;&＃64;styles/modules/loadable.module.scss&＃39;
// 通用的过场组件
const loadingComponent &＃61;()&＃61;>{return (

• 2.使用懒加载

import loadable from &＃39;&＃64;utils/loadable&＃39;
// &＃64;pages/main/main 是我组件的路径
const mainPage &＃61; loadable(() &＃61;> import(&＃39;&＃64;pages/main/main&＃39;))
export {mainPage
}


以上内容如果对你的项目有帮助&＃xff0c;请给个赞谢谢&＃xff01;