qiankun.js项目问题记录

635 阅读1分钟

一丶进入子应用,样式生效于dom之后,页面闪烁问题。(子应用样式style加载位置不对)

# [Bug]子项目异步插入到 head 标签的 style 位置不正确
已经有人在git上提出此问题,具体查看此issues

二丶当重复切换子应用时,页面样式有快速闪烁

场景描述

022d28ee0e8e14412ff3a43196da48f.png

8fdf5bbcc45f4837c73f141a19a3b20.png

96677a59e849f80fcf49f02029d3782.png

问题分析

这是由于qiankun的沙箱设计如此,css并不会被缓存,当切换其他子应用时,承载子应用的容器会被初始化,并重新加载此前该应用加载过的css文件,故子应用会因为css文件刷新而导致页面闪烁的问题,尤其当css请求过慢时(例如没有做http缓存),此问题犹为凸显。

解决方案

就此问题曾询问过qiankun的相关人员,他们的说法是,可以给静态资源做缓存,以加快css的请求速度,达到在dom渲染之前加载完css,但是经过实践后效果不佳,虽然的确能由原先的页面顿挫感优化为轻微快速闪烁一下。 或者可以考虑不开启沙箱,沙箱主要是解决css隔离,防止各个子应用之间的样式污染,可以考虑从其他手段解决子应用样式隔离,关闭沙箱,例如从开发规范上。