异步import时好时坏怎么办?

勇敢的少年
  • 1k
console.log(0, import('../Pages/IndexPage'))


const withLoadable = (path) => {
    console.log(1, import(path))
    return Loadable({
        loader: () => {
            return import(path)
        },
        loading: Loading
    })
}
withLoadable('../Pages/IndexPage')

第一种方法可以拿到组件 第二种则不行
image

是为什么?

回复
阅读 838
2 个回答
✓ 已被采纳

你是用webpack或其他打包工具开发的吧,如果纯粹使用es6进行开发应该是没有问题的。

webpack在开发阶段也会进行打包,而他内部自己实现了一套import。webpack在打包的时候会找到import进行依赖收集,你的代码中import(path)path是一个变量,并不指向具体的哪个路径,所以打包的时候找不到你下面传入的路径,你看给出的错误提示也应该能看出来:cannot find module xxx at xxx,这个main.chunk.js就是打包后的主文件。

详细的可以网上查下资料,webpack import() 动态加载模块踩坑在vue中import()语法为什么不能传入变量?

错误信息已经提示你了,找不到 ../Pages/IndexPage 这个模块。

其实主要就是webpack打包原理,你可以这样理解:
在遇到import的时候,会直接引入把这个模块打包进chunk,所以你第一个可以找到文件,
但是第二个你是一个函数,接受一个path去引入,webpack在打包的时候是不知道的,最后在你执行的时候去找你传入的路径上的模块,打包完了你执行的时候是在 /static/js 下的所以是找不到这个 ../Pages/IndexPage 这个模块的。

宣传栏