React webpack 包的预加载动画 [英] Preloading animation for React webpack bundle
问题描述
我有一个 单页 web 应用，大约 300Kb.它与 webpack 捆绑在一起并使用 React/Redux.
如何在页面加载之前放置一个小的加载微调器?我可以上图
- 将样式和 css 放入静态 index.html
- 使用异步加载器，如 krux/postscribe
一种方法是在 index.html 中插入加载动画
例如
<头><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><身体><div id="内容"><div id="loader"/><script src="build/app.js"></script></html>
然后bundle.js加载后会在内容中渲染，加载动画消失.
另一种方法是使用渐进式网络应用程序.https://developers.google.com/web/updates/2015/10/启动画面
然而，此功能可能仅在现代浏览器中可用，这就是为什么应将第一种方法用作后备方法的原因.然而，好处是，如果您的应用处于离线状态，它仍然可以播放加载动画，可以给出具体的错误信息.
I have a single page webapp, which is about 300Kb big. It gets bundled with webpack and uses React/Redux.
How do I put a small loading spinner upfront until the page is loaded? I can image
- putting the style and css into the static index.html
- using an async loader like krux/postscribe
One way would be to insert the loading animation in the index.html
e.g.
<!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>
Then after the bundle.js is loaded it will render in the content and the loading animation will disappear.
EDIT:
Another method is to use a progressive webapp. https://developers.google.com/web/updates/2015/10/splashscreen
However this feature might only be available in modern browsers, which is why the first approach should be used as a fallback method. The benefit however is, that if your app is offline it will still play the loading animation and can give specific error messages.
这篇关于React webpack 包的预加载动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
