在 Webpack Bundle 加载时运行基于 JS 的加载动画答案

【问题标题】：Running JS-Based Loading Animation While Webpack Bundle Loads在 Webpack Bundle 加载时运行基于 JS 的加载动画
【发布时间】：2020-08-18 23:43:58
【问题描述】：

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

我正在构建一个网页，其主体是一个 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 时，所有其他脚本都停止运行。正如那篇文章所建议的那样，我在bundle.js 的脚本标签上尝试了async 和defer，但没有运气。鉴于 JS 是单线程的，我担心除了使用纯 CSS 动画或 GIF 之外别无他法，但我正在寻找更好的选择。

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

【问题讨论】：

标签： javascript html reactjs asynchronous webpack

【解决方案1】：

出于以下几个原因，我强烈建议您使用 CSS 加载动画：

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

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

【讨论】：

非常感谢！应该更清楚一点：加载脚本不是用 React 编写的。它是纯 JS。不确定这是否有所作为。但是您在（1）中的观点是有道理的。有没有办法让 React 异步渲染，或者让（2）中提到的页面加载事件异步？
据我所知，使用纯 CSS 随机选择启动文本也是不可能的。就算能改内容，也没办法这么随意。因此，即使有 GPU 凸起，我也失去了很多我正在寻找的功能。如果只有浏览器 JS 解释器有第二个 GPU 加速线程......
“不确定这是否有影响” 不。知道他们正在研究一种将渲染方法分成多个部分的方法可能会很有趣（有点像你提到的 setTimeout 技巧。）但总渲染时间保持不变（公平地说，将其切割扩展了完整的渲染时间）：reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html
“使用纯 CSS 随机选择初始文本”“随机”是什么意思？
非常酷的预览——那种功能会很有帮助！也许它归结为动态加载捆绑包，如果这不是太疯狂的话——就像一个大的eval，如果可以异步的话。当我说随机时，我的意思是我有一组可能有 8 个启动短语，一旦另一个完成动画，我会随机选择一个（动画显示启动文本，然后为后面的椭圆设置动画）。它每次选择不同的启动文本。