带内插字符串的动态导入答案

【问题标题】：dynamic import with interpolated string带内插字符串的动态导入
【发布时间】：2022-12-19 12:06:30
【问题描述】：

我正在一个业余项目中尝试 parcel，之前曾使用过 create-react-app（即 webpack）。我对以下类型的动态导入有丰富的经验：

const Page = React.lazy(() => import(`./${page}`));

这是在处理悬念等的包装器组件中，并获取 page 作为道具（始终是文字字符串，没有变量/表达式。不确定这是否有所作为）。

使用 webpack 效果非常好，尽管我不确定如何。我在应用程序中点击的每个此类页面都会在第一次加载，然后立即可用。我知道这对打包者来说很难弄清楚，但是，是的，它确实有效。

当我对 parcel 进行同样的尝试时，它仍然可以构建，但在运行时失败了。如果我动态导入例如'./SomePage'，这正是从服务器 (GET /SomePage) 请求的内容，当然服务于 index.html。这在开发服务器和构建中都会发生。该构建也只生成一个.js 文件，因此它根本不会拆分。

像这样导入包裹甚至有可能吗？我是否缺少某些配置（目前没有）？

【问题讨论】：

标签： parceljs

【解决方案1】：

我认为 webpack 中有一个未修复的错误，由于无法确定确切的文件路径，因此使用插值进行动态导入会出现问题。

Source

Webpack 会收集所有依赖项，然后检查导入语句，将参数解析为 reg 语句，如下所示：

import('./app'+path+'/util') => /^./app.*/util$/

Webpack 根据 reg 寻找符合条件的模块。所以如果 param 是一个变量，Webpack 会使用错误的 reg 语句来查找模块，换句话说，会全局查找模块。

尝试添加一个空字符串并附加插值可能会帮助你。
const Page = React.lazy(() => import("" + `./${page}`));

【讨论】：