С React, может ли кто-нибудь объяснить мне, почему динамический импорт терпит неудачу, когда мы используем переменную?
// Do not work
let module = "./DynamicComponent";
import(module).then(ModuleLoaded => {})
// Works
import("./DynamicComponent").then(ModuleLoaded => {})
Я пытался обновить кеш браузера, но ничего не изменилось.
Согласно документации 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");
});
