react 入门套件页面路由中的 require.ensure 做什么

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 的“分块”或“代码拆分”。基本上，它是一种加载组件的异步方式，因此对于任何给定页面只呈现必要的组件。我们不需要顶部的组件，而是有条件地或仅在某些路线上需要它们。在我们确定用户是管理员之前，我们不想加载'./Admin。请参阅docs 了解更多信息。

这是一项授权检查，以确保用户拥有 管理员角色？

我不这么认为；在我看来，这是通过 if (!isAdmin) 完成的。

什么是 .default 属性以及字符串 'admin' 是什么 用于？

'default' 属性表示模块是使用 ES6 export default 语法导出的。导出模块的方法不止一种 - 使用 module.exports = { ... } 或 export default class SomeClass { ... }。这有点像 CommonJS 和 ES6 之间的差异（据我了解），但您可能会对 this SO answer 感兴趣。

至于'admin' 字符串，就是“块名称”。再次来自文档：

通过将相同的 chunkName 传递给各种 require.ensure() 调用，我们可以将它们的代码组合成一个单独的块，从而只需要浏览器加载一个包。