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

Question

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

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

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

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

Answer 1

根据 webpack 文档。

It is not possible to use a fully dynamic import statement, such as import(foo). Because foo could potentially be any path to any file in your system or project.

The import() must contain at least some information about where the module is located.

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");
    });

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

react dynamic import using a variable doesn't work

javascript

dynamic-import

reactjs