require.ensure 在 React 入门工具包页面路由中做了什么

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直到我们确定该用户是管理员。请参阅文档以获取更多信息。

这是一个授权检查以确保用户具有管理员角色吗？

我不这么认为；在我看来，这件事已经完成了if (!isAdmin)。

.default 属性是什么？字符串“admin”的用途是什么？

“default”属性表示该模块是使用 ES6export default语法导出的。导出模块的方法不止一种 - withmodule.exports = { ... }或 with export default class SomeClass { ... }。这是 CommonJS 和 ES6 之间差异的一个兔子洞（据我所知），但这个答案可能会让你感兴趣。

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

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