将字符串传递给导入函数 React答案

【问题标题】：Passing String to Import Function React将字符串传递给导入函数 React
【发布时间】：2023-03-20 10:02:01
【问题描述】：

我正在尝试创建一个辅助方法来延迟导入反应延迟的模块。

第一个版本，当我修复了导入中的路径时，它可以工作：

import { lazy } from 'react';

export function lazyLoaderWithDealy() {
  return lazy(async () => {
    const [moduleExports] = await Promise.all([
      import('components/SchemaEditor'),
      new Promise(resolve => setTimeout(resolve, 300))
    ]);
    return moduleExports;
  });
}

但是在第二个示例中，当模块的路径来自变量时，它不起作用，知道为什么吗？

import { lazy } from 'react';

export function lazyLoaderWithDealy(path) {
  return lazy(async () => {
    const [moduleExports] = await Promise.all([
      import(path),
      new Promise(resolve => setTimeout(resolve, 300))
    ]);
    return moduleExports;
  });
}

【问题讨论】：

你考虑过关键字'this'吗？
it doesn't work 请更好地解释什么不起作用。它会给你一个错误吗？什么都没有加载？请更清楚，并将 deteais 添加到您的问题

标签： reactjs ecmascript-6 lazy-loading react-suspense

【解决方案1】：

您应该传递整个导入，而不是传递 path。

import { lazy } from 'react';

export function lazyLoaderWithDealy(importPromise) {
  return lazy(async () => {
    const [moduleExports] = await Promise.all([
      importPromise,
      new Promise(resolve => setTimeout(resolve, 300))
    ]);
    return moduleExports;
  });
}

// ...

lazyLoaderWithDealy(import('components/SchemaEditor'))

你应该看看this answer。你不能像import(path) 这样动态导入，因为 webpack 无法知道应该捆绑什么，如果你通过类似的东西，webpack 你需要捆绑你的洞应用程序（你不想要并且不能）。如果你传递import('components/' + path) 之类的东西，webpack 会将所有内容捆绑在components 中，这可行，但也很糟糕。

如果可以将洞字符串传递给import，那么对于lazyload会更好，如果不能，则至少需要传递一些文件夹+路径。

【讨论】：

【解决方案2】：

如果您收到“错误：找不到模块 ./PATH”错误，请检查以下链接。 https://github.com/webpack/webpack/issues/6680。这就是我的问题。

【讨论】：