我有一个单页 Web 应用程序，大约有 300Kb 大。它与 webpack 捆绑在一起并使用 React/Redux。
如何在页面加载之前放置一个小的加载旋转器？我可以想象
- 将样式和CSS放入静态index.html
- 使用像krux/postscribe这样的异步加载器
最佳答案
一种方法是在index.html中插入加载动画
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="content">
<div id="loader" />
</div>
<script src="build/app.js"></script>
</body>
</html>
然后，在加载bundle.js后，它将在内容中渲染，并且加载动画将消失。
编辑:
另一种方法是使用渐进式 Web 应用程序。 https://developers.google.com/web/updates/2015/10/splashscreen
但是，此功能可能仅在现代浏览器中可用，这就是为什么第一种方法应用作后备方法。 但好处是，如果您的应用程序离线，它仍然可以播放 加载动画并可以给出具体的错误消息。
关于reactjs - React webpack 包的预加载动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35299620/