使用变量反应动态导入不起作用

Question

使用 React，谁能解释一下为什么当我们使用变量时动态导入会失败？

// Do not work
let module = "./DynamicComponent";
import(module).then(ModuleLoaded => {})

// Works
import("./DynamicComponent").then(ModuleLoaded => {})

我尝试刷新浏览器缓存但没有任何变化。

Answer 1

根据webpack文档。

不可能使用完全动态的导入语句，例如 import(foo)。因为 foo 可能是系统或项目中任何文件的任何路径。

import() 必须至少包含一些关于模块所在位置的信息。

https://webpack.js.org/api/module-methods/#dynamic-expressions-in-import。

所以下面的片段有效

import("./components/About").then(component => {
  console.log(component, "loaded successfully");
});

下面的代码段不起作用

let a = "./components/About";
    import(a).then(component => {
      console.log(component, "loaded successfully");
    });

我找不到任何说明确切原因的解释，为什么上面的代码有效。但是我的直觉是 webpack 不知道变量的数据类型a（它必须是字符串），因此无法在动态导入中使用它。

上面的代码被转译为

let a = "./components/About";
    __webpack_require__("./src lazy recursive")(a).then(component => {
      console.log(component, "loaded successfully");
    });

下面的代码实际上有效（将变量嵌入字符串文字中）。

let a = "./components/About";
    import(`${a}`).then(component => {
      console.log(component, "loaded successfully");
    });

这被转译为

let a = "./components/About";
    __webpack_require__("./src lazy recursive ^.*$")("".concat(a)).then(component => {
      console.log(component, "loaded successfully");
    });