Quiero crear una administración de enrutador basada en carpetas y dividir las páginas completas en archivos de fragmentos usando webpackChunkName. si declaro todas mis rutas en una matriz estática, la división de fragmentos y la carga diferida funcionan bien. Sin embargo, cuando uso la importación React.lazy dentro de un bucle for, no funciona en absoluto. No dividirá ningún archivo de fragmentos en función de cada ruta.

Así que aquí están mis declaraciones:

Esto funciona como un encanto:

 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, }, ],

Cuando intento importar dinámicamente dentro de un bucle for, no funciona en absoluto...

 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}` ) ), }; }), }; }),