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

问题描述 投票:0回答: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;
  });
}
reactjs lazy-loading react-suspense
1个回答
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'))

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

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

© www.soinside.com 2019 - 2024. All rights reserved.