我正在尝试创建一个辅助方法来延迟导入模块,并延迟响应时间。
第一个版本,当我修复导入中的路径时,它起作用:
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;
});
}
代替传递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
中的所有内容,这是可行的,但也很糟糕。
如果可以将孔字符串传递给导入,则对于延迟加载会更好,如果不能,则至少需要传递一些文件夹+路径。