require.ensure在react starter kit页面路由中做了什么

Question

查看 react-starter-kit 中的示例代码，我对语句 require.ensure([], (require) => resolve(require('./Admin').default), 'admin'); 的作用感到困惑。我没有看到 require.ensure 在任何地方定义，所以我假设它是一个 webpack 函数。

这是为了确保用户具有管理员角色的授权检查吗？如果是这样，用户信息和角色信息在哪里被实例化？

是否只是为了确保管理组件被实例化？ .default 属性是什么，字符串 'admin' 的用途是什么？

import React from 'react';
import Layout from '../../components/Layout';

const title = 'Admin Page';
const isAdmin = false;

export default {

  path: '/admin',

  async action() {
    if (!isAdmin) {
      return { redirect: '/login' };
    }

    const Admin = await new Promise((resolve) => {
      require.ensure([], (require) => resolve(require('./Admin').default), 'admin');
    });

    return {
      title,
      chunk: 'admin',
      component: <Layout><Admin title={title} /></Layout>,
    };
  },

};

Answer 1

我相信 require.ensure 是用于 webpack 'chunking' 或 'code splitting.' 基本上它是一种加载组件的异步方式，因此只为任何给定页面呈现必要的组件。我们不是在顶部要求组件，而是有条件地或仅在某些路线上要求它们。在我们确定用户是管理员之前，我们不想加载 './Admin。有关详细信息，请参阅 docs。

Is that an authorization check to make sure that the user has an admin role?

我不这么认为；在我看来，if (!isAdmin).

就是这样做的

What is the .default property and what is the string 'admin' being used for?

'default' 属性表示模块是使用 ES6 export default 语法导出的。导出模块的方法不止一种 - module.exports = { ... } 或 export default class SomeClass { ... }。这是 CommonJS 和 ES6 之间的区别（据我所知），但可能对您感兴趣。

至于 'admin' 字符串，那是 'chunk name.' 同样来自文档：

By passing the same chunkName to various require.ensure() calls, we can combine their code into a single chunk, resulting in only one bundle that the browser must load.

require.ensure在react starter kit页面路由中做了什么

What does require.ensure do in the react starter kit page routing

webpack

react-starter-kit