异步import时好时坏怎么办？

Question

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')

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

是为什么？

Answer 1

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

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

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

Answer 2

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

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