react开发环境加载样式页面闪烁解决方案

最新推荐文章于 2023-10-12 19:13:39 发布

唐大仙儿

最新推荐文章于 2023-10-12 19:13:39 发布

阅读量4.9k

点赞数 1

分类专栏： react笔记文章标签： react

本文链接：https://blog.csdn.net/tangfan7/article/details/88928430

版权

react笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

index.html的 head 标签中加上即可
当加载 css 时判断 Blob 对象不存在，则会直接在 head 中插入 style 标签加载
因为是同步加载，所以在 js 加载之前就已经有样式了，就不会导致闪烁了

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dva Demo</title>
  <% if (process.env.NODE_ENV === 'development') { %>
    <script>Blob = void 0</script>
    <script>window.addEventListener('load', function () { var iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.body.appendChild(iframe); Blob = iframe.contentWindow.Blob })</script>
  <% } %>
</head>
<body>
  <div id="root"></div>
</body>
</html>

不过这样会导致另外一个问题，如果你使用了 Blob 对象，可能会受影响，如果没有使用则可以忽略
这里使用 iframe.contentWindow.Blob 来恢复 window.Blob 对象
但是需要在页面完全加载之后才能获取到 Blob 对象，否则获取的是 undefined

原issues链接：https://github.com/sorrycc/roadhog/issues/385