时间戳

首页 > 解决方案 > 使用内部 for 循环时反应延迟导入不起作用

javascript - 使用内部 for 循环时反应延迟导入不起作用

问题描述

我想创建基于文件夹的路由器管理，并使用 webpackChunkName 将整个页面拆分为块文件。如果我将整个路由声明为静态数组，则块拆分和延迟加载工作正常。但是，当我在 for 循环中使用 React.lazy 导入时，它根本不起作用。它不会根据每条路由拆分任何块文件。

所以这是我的声明：

这就像一个魅力：

links: [
      {
        id: "about",
        path: "/about",
        component: lazy(() =>
          import(/* webpackChunkName: "About" */ "@/views/About")
        ),
        icon: faExclamationCircle,
      },
      {
        id: "guide",
        path: "/guide",
        component: lazy(() =>
          import(/* webpackChunkName: "Guide" */ "@/views/Guide")
        ),
        icon: faBookReader,
      },
    ],

当我尝试在 for 循环中动态导入时，它根本不起作用......

  sections: result[0].pages.map((i) => {
      // It throws an error if doesn't have a config file
      const config = require(`@/views/sections/${i.section}/config.js`).default;
      return {
        id: i.section,
        icon: config.icon,
        groups: config.group,
        pages: i.pages.map((x, k) => {
          if (x.section === "index.js")
            return {
              id: i.section,
              path: "/" + i.section,
              component: lazy(() =>
                /* webpackChunkName: "someModule",  */
                import(`@/views/sections/${i.section}/index.js`)
              ),
            };

          return {
            id: getCleanPath(x.section),
            path:
              k === 0
                ? `/${i.section}`
                : getCleanFullPath(i.section, x.section),
            component: lazy(() =>
              import(
                /* webpackChunkName: "someModule" */
                `@/views/sections/${i.section}/${x.section}`
              )
            ),
          };
        }),
      };
    }),

标签： javascriptreactjswebpack

解决方案

Ups，我使用 require.context 来获取 src 文件夹中的所有文件夹，所以我必须“懒惰”地加载它。这就是为什么 webpack 不会拆分块文件的原因。

// Before
require.context("../views/sections", true, /^(?!.*config\.js$).*\.(js)$/)

// After
require.context("../views/sections", true, /^(?!.*config\.js$).*\.(js)$/, "lazy")

推荐阅读