Question

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

如何在页面加载之前预先放置一个小的加载微调器？我可以成像

将样式和css放入静态 index.html
使用像krux/postscribe

Answer 1

一种方法是在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>

然后在加载bundle.js后，它将在内容中呈现，加载动画将消失。

编辑：

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

但是，此功能可能仅在现代浏览器中可用，这就是为什么第一种方法应该用作回退方法。然而，好处是，如果您的应用程序处于离线状态，它仍会播放加载动画并可以给出特定的错误消息。

Answer 2

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

结果如下：

为React webpack bundle预加载动画

2 个答案: