React webpack 包的预加载动画答案

【问题标题】：Preloading animation for React webpack bundleReact webpack 包的预加载动画
【发布时间】：2016-05-19 21:14:30
【问题描述】：

我有一个 单页 webapp，大约 300Kb 大。它与 webpack 捆绑并使用 React/Redux。

如何在页面加载之前放置一个小的加载微调器？我可以拍照

将样式和css放入静态index.html
使用像krux/postscribe这样的异步加载器

【问题讨论】：

标签： reactjs webpack preload

【解决方案1】：

一种方法是在 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加载完成后会在内容中渲染，加载动画会消失。

编辑：

另一种方法是使用渐进式网络应用程序。 https://developers.google.com/web/updates/2015/10/splashscreen

但是，此功能可能仅在现代浏览器中可用，这就是为什么应将第一种方法用作后备方法的原因。然而，好处是，如果您的应用处于离线状态，它仍然可以播放加载动画，可以给出具体的错误信息。

【讨论】：

谢谢，正在找这个！

【解决方案2】：

我也遇到过这个问题，但有一个例外：我想显示一个加载进度条。我最终编写了一个 webpack 插件和一个自定义资产引导加载程序。查看我的演示项目repository。

结果如下：

【讨论】：