将字符串传递给导入函数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'))

您应该看一下this answer。您无法进行import(path)之类的动态导入，因为webpack无法知道应捆绑的内容，如果传递类似的内容，则webpack需要捆绑Hole应用程序（您不希望这样做）并且不能）。如果传递类似import('components/' + path)的内容，则webpack将捆绑components中的所有内容，这是可行的，但也很糟糕。

如果可以将孔字符串传递给导入，则对于延迟加载会更好，如果不能，则至少需要传递一些文件夹+路径。