1

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

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

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

2 回答 2

0

而不是传递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 您需要捆绑您的洞应用程序（您不想要也可以） t)。如果你传递类似 的东西import('components/' + path)，webpack 会将所有内容捆绑在 中components，这很有效，但也很糟糕。

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

于 2019-12-27T12:16:13.420 回答
0

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

于 2019-12-27T12:58:45.403 回答