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

Question

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

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

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

Answer 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'))

你应该看看。你不能做像 import(path) 这样的动态导入，因为 webpack 将无法知道应该捆绑什么，如果你传递类似的东西，webpack 你需要捆绑你的 hole 应用程序（你不知道不想也不能）。如果你传递类似 import('components/' + path) 的东西，webpack 会把 components 中的所有东西都打包起来，这有效，但也很糟糕。

如果能把hole string传给import，对lazyload会更好，如果不能，至少要传一些文件夹+路径。

Answer 2

如果出现 "Error: Cannot find module ./PATH" 错误，请检查以下 link。 https://github.com/webpack/webpack/issues/6680。这就是我的问题。

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

Passing String to Import Function React

lazy-loading

ecmascript-6

reactjs

react-suspense