如何实现react-admin应用登录后加载指定模块的代码分割？

要实现登录后才动态加载./posts和./users模块并完成代码分割，你可以通过以下步骤调整代码：

1. 切换为函数组件（更适配React Hooks） #

把原来的类组件改成函数组件，这样能更方便地处理动态导入和登录状态判断，逻辑会更简洁。

2. 用React.lazy实现动态导入 #

通过React.lazy包裹动态import()语句，webpack会自动将这些模块分割成独立的bundle文件。因为我们要导入模块里的命名导出，所以需要在import()的then回调里指定对应的默认导出。

3. 用Suspense处理加载过渡 #

渲染动态导入的组件时，必须用React.Suspense包裹，提供加载过程中的占位UI，避免页面出现空白或异常。

4. 结合登录状态控制资源渲染 #

利用react-admin提供的useAuthState钩子判断用户是否已登录，只有登录成功后才渲染包含动态组件的Resource。

修改后的完整代码 #

import React, { lazy, Suspense } from 'react';
import { Admin, Resource, useAuthState } from 'react-admin';
import { Login } from 'ra-ui-materialui';
import { authProvider, dataProvider, i18nProvider } from './providers';

// 动态导入posts模块的各个组件，webpack自动完成代码分割
const PostList = lazy(() => import('./posts').then(module => ({ default: module.PostList })));
const PostEdit = lazy(() => import('./posts').then(module => ({ default: module.PostEdit })));
const PostCreate = lazy(() => import('./posts').then(module => ({ default: module.PostCreate })));
const PostIcon = lazy(() => import('./posts').then(module => ({ default: module.PostIcon })));

// 动态导入users模块的各个组件
const UserList = lazy(() => import('./users').then(module => ({ default: module.UserList })));
const UserEdit = lazy(() => import('./users').then(module => ({ default: module.UserEdit })));
const UserCreate = lazy(() => import('./users').then(module => ({ default: module.UserCreate })));
const UserIcon = lazy(() => import('./users').then(module => ({ default: module.UserIcon })));

// 自定义加载时的占位组件
const LoadingFallback = () => <div>Loading resources...</div>;

function App() {
  const { isAuthenticated } = useAuthState();

  return (
    <Admin 
      title="MyApp" 
      loginPage={Login} 
      dataProvider={dataProvider} 
      authProvider={authProvider} 
      i18nProvider={i18nProvider}
    >
      {/* 仅在用户登录后，才渲染动态加载的资源 */}
      {isAuthenticated && (
        <Suspense fallback={<LoadingFallback />}>
          <Resource 
            name="posts" 
            list={PostList} 
            edit={PostEdit} 
            create={PostCreate} 
            icon={PostIcon} 
          />
          <Resource 
            name="users" 
            list={UserList} 
            edit={UserEdit} 
            create={UserCreate} 
            icon={UserIcon} 
          />
        </Suspense>
      )}
    </Admin>
  );
}

export default App;

额外说明 #

• 代码分割逻辑：React.lazy配合动态import()会告知webpack将这些模块打包成独立的chunk，只有当用户登录后组件被渲染时，这些chunk才会被加载。
• 加载状态优化：你可以根据需求自定义LoadingFallback组件的样式，比如换成Material-UI的加载指示器，提升用户体验。
• 类组件兼容方案：如果不想切换为函数组件，也可以在类组件中通过componentDidMount结合动态导入，将组件实例存入state，再在render中根据登录状态和state值判断是否渲染Resource。不过函数组件+Hooks的实现方式更直观简洁。

内容的提问来源于stack exchange，提问作者Christiaan Westerbeek