react路由按需加载方法

最新推荐文章于 2021-04-28 18:16:42 发布

weixin_34245169

最新推荐文章于 2021-04-28 18:16:42 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wenbodeboke/p/9883666.html

本文介绍在使用router4后，如何通过react-loadable插件替代require.ensure实现组件的按需加载。首先需要安装react-loadable，然后创建loadable文件配置延迟加载组件，最后在路由中引入并应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用router4之后以前的按需加载方法require.ensure 是不好使了。

所以我们改用react-loadable插件做按需加载。

第一步：

yarn add react-loadable --save-dev

第二步

创建一个 loadable文件代码如下：

import React from 'react';
import Loadable from 'react-loadable';

export default function withLoadable (comp) {
    return Loadable({
        loader:comp,
        loading:()=>null,
        delay:0
    })
}

路由这样写

import Bundle from './loadable';
const WrappedNormalLoginForm= Bundle(()=>import('./doLogin/dologin'));

···
   <Route exact path="/" component={WrappedNormalLoginForm}/> 
···

有不对的地方请多多指正　

转载于:https://www.cnblogs.com/wenbodeboke/p/9883666.html