时间戳

首页 > 解决方案 > 使用变量反应动态导入不起作用

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

问题描述

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

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

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

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

标签： javascriptreactjsdynamic-import

解决方案

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

推荐阅读