登录前后将 react-admin 应用与捆绑包拆分的代码

Posted 2023-02-19

【中文标题】登录前后将 react-admin 应用与捆绑包拆分的代码

【英文标题】：Code splitting a react-admin app with a bundle before and after login

【发布时间】：2018-10-21 11:03:05

【问题描述】：

考虑如下所示的 react-admin 应用程序。我计划以 './posts' 和 './users' 中的所有内容仅在用户登录后加载的方式进行代码拆分。

我打算使用我可以使用的dynamic import() syntax 以便webpack automatically starts code-splitting 应用程序。

我看到的问题是所有应用程序组件都是使用应用程序的定义导入的。 './posts' 和 './users' 中内容的动态导入不会被拆分，因为它是在应用程序本身导入的。

如何设置和拆分此代码库，以便仅在用户登录后加载 './posts' 和 './users' 中的内容？

import React,  Component  from 'react';
import  Admin, Resource  from 'react-admin';
import  Login  from 'ra-ui-materialui';
import  authProvider, dataProvider, i18nProvider  from './providers';
// vvv - to be loaded after the user has logged in 
import  PostList, PostEdit, PostCreate, PostIcon  from './posts';
import  UserList, UserEdit, UserCreate, UserIcon  from './users';
// ∧∧∧

class App extends Component 
    render() 
        return (
            <Admin
                title="MyApp"
                loginPage=Login
                dataProvider=dataProvider
                authProvider=authProvider
                i18nProvider=i18nProvider
            >
                <Resource
                    name="posts"
                    list=PostList
                    edit=PostEdit
                    create=PostCreate
                    icon=PostIcon
                />
                <Resource
                    name="users"
                    list=UserList
                    edit=UserEdit
                    create=UserCreate
                    icon=UserIcon
                />
            </Admin>
        );
    

export default App;

【参考方案1】：

据我了解，您只想在登录后显示帖子和用户，因此您可以做的是使用状态变量将另一个组件包装到一个条件中，并将一个函数传递给您的 Admin 组件并在何时调用它登录成功是这样的：

import React,  Component  from 'react';
import  Admin, Resource  from 'react-admin';
import  Login  from 'ra-ui-materialui';
import  authProvider, dataProvider, i18nProvider  from './providers';
// vvv - to be loaded after the user has logged in 
import  PostList, PostEdit, PostCreate, PostIcon  from './posts';
import  UserList, UserEdit, UserCreate, UserIcon  from './users';
// ∧∧∧

class App extends Component 
   state:
     loggedIn: false,
          
    onLoginSuccess()
     this.setState(loggedIn: true);
     
    render() 
        return (
            <Admin
                title="MyApp"
                loginPage=Login
                onLoginSuccess=this.onLoginSuccess.bind(this)
                dataProvider=dataProvider
                authProvider=authProvider
                i18nProvider=i18nProvider
            >
               (this.state.loggedIn) && 
                  <Resource
                    name="posts"
                    list=PostList
                    edit=PostEdit
                    create=PostCreate
                    icon=PostIcon
                />
                <Resource
                    name="users"
                    list=UserList
                    edit=UserEdit
                    create=UserCreate
                    icon=UserIcon
                />
             
            </Admin>
        );
    

export default App;

或者更好的方法可能是创建一个单独的路由文件并处理 所有这些逻辑都在那里

【讨论】：

我的意思与展示无关（是的，也是如此），但更多的是关于加载。我不希望在用户登录之前将 './posts' 和 './users' 中的 javascript 内容加载到浏览器中。

【参考方案2】：

用 react-loadable 包装你的“帖子”和“用户”组件。

我最近的用法（使用纯 react-router 应用和 react-admin 应用！）

import Loadable from 'react-loadable';

const AsyncCrontabList = Loadable(
    loader: () => import('./containers/Crontab/CrontabList'),
    loading: Loading
);

<Resource name="crontabs" context="interval"
                              options= label: 'Crontabs', group: 'Automation'     icon=<TimerIcon/>
                              list=AsyncCrontabList
                              create=AsyncCrontabCreate
                              edit=AsyncIntervalEdit/>

之后，我可以看到组件在 F12 - 调试中被分块。 据我所知，当我们导航到正确的路径时，这些块将被加载（实际导入）。使用 react-admin，资源可以通过名称来识别和导航，因此当您在此处应用可加载方法时，它会起作用！这是我的用例。

【讨论】：

看起来像。当我有时间对此进行测试时，我可能会接受这个答案。