SmallStoneSK/Blog

import() 动态导入组件,转场动画无法出现

Closed this issue · 3 comments

import() 动态导入组件,转场动画无法出现

动态组件应该用一个placeholdPage来过渡,不然考虑网络差的情况,页面的js代码是动态加载的,js代码都还没加载好呢,怎么切换过去。

动态组件应该用一个placeholdPage来过渡,不然考虑网络差的情况,页面的js代码是动态加载的,js代码都还没加载好呢,怎么切换过去。

大佬能给个demo吗?

动态组件应该用一个placeholdPage来过渡,不然考虑网络差的情况,页面的js代码是动态加载的,js代码都还没加载好呢,怎么切换过去。

大佬能给个demo吗?

我的意思其实就是用React.Suspense之类的东西,在页面的js未加载完成之前,用一个Loading组件代替,达到过渡的效果。没有转场动画的原因就是code split之后,下一个page的js文件未ready。当你进入过这个页面之后回退到首页,再进入这个页面就会有转场动画了。

你也可以尝试在首页空闲的情况下,去加载这个page的js(有点类似于预加载),这样也能提升用户体验。