在Webpack捆绑加载时运行基于JS的加载动画

如何解决在Webpack捆绑加载时运行基于JS的加载动画

TLDR：当我的Webpack包加载时，我的加载动画（用JS编写）无法播放，这违背了加载动画的目的。我正在寻找一种使两者并行发生的方法。

我正在构建一个网页，该网页的主体是一个React应用程序，已被编译为一个越来越大的Webpack捆绑包。（我知道我应该跳上懒惰的加载火车；现在，该捆绑包只是一个整体的着陆页。）我为该页面实现了加载动画，该动画在一系列SVG框架上循环，并且很长时间以来，它一直在工作看起来很完美，但是添加Redux存储似乎已将其推向了边缘。 现在，每当我重新加载页面时，在捆绑包加载时动画都会冻结大约10秒钟，然后才开始播放，就像React应用程序调用加载器的回调并且动画淡出一样。

这是我页面的大致结构：

<head>
  <!--Meta info-->
  <script>/*Handles favicon color based on light/dark mode preference of browser*/</script>
  <!--Stylesheets-->
  <script>/*Handles debug info for React DevTools*/</script>
</head>
<body>
  <div id="loader-container">
    <div id="loader">
      <div id="loader-text"><!--Contains splash text that's meant to cycle over time--></div>
      <div id="loader-character-container"><!--Contains SVG whose contents are meant to cycle over time--></div>
  </div>
  <script id="run-load-animation">/*Handles SVG and text animation*/</script>

  <div id="root"><!--Where React will do all of its rendering--></div>
  <script src="bundle.js" onload="bundleLoaded(event)"></script>
</body>

#run-load-animation是加载bundle.js时应运行的内容。

我尝试过的事情：

我将脚本中的setInterval的原始用法更改为requestAnimationFrame，但这没什么区别。
如果我将打印语句放置在应该开始动画的代码行之前和之后，则在它们被打印之间似乎有大约10秒钟的延迟，在此期间动画无法播放。在那里绝对不应该拖延时间。
我用无限运行的setInterval替换了原来的加载动画脚本，该脚本只显示一条消息。在加载bundle.js时，它向控制台发送的消息显示了大约10秒钟的暂停。这使我相信错误不是我的动画逻辑。

基于this handy article on the HTML page load lifecycle，似乎不可避免的事情正在发生：在加载bundle.js时，所有其他脚本都停止在其轨道中。正如该文章所建议的那样，我在async的脚本标签上尝试了defer和bundle.js，但是没有运气。鉴于JS是单线程的，所以我担心只能使用纯CSS动画或GIF来解决这个问题，但是我正在这里寻找更好的选择。

有什么方法可以确保我的JS代码在加载bundle.js时继续运行动画脚本吗？

解决方法

出于某些原因，我强烈建议您使用CSS加载动画：

React渲染（和水合）方法可同时运行所有javascript代码。这就是为什么同时冻结所有JavaScript代码的原因。
在页面加载时执行的任何外部脚本也会阻止您的JavaScript动画。即使您找到了React渲染方法的解决方案。
即使您通过诸如setTimeout执行React JavaScript代码是多个部分，您充其量也只会得到断断续续的动画。

因为CSS动画是GPU加速的（在大多数设备上），所以它们可以独立于任何CPU负载运行。所有的javascript代码都将在CPU上下载，解析和执行。浏览器的其他任何CPU工作都会使您的JavaScript动画不稳定。

在Webpack捆绑加载时运行基于JS的加载动画

如何解决在Webpack捆绑加载时运行基于JS的加载动画

解决方法

相关推荐