为React webpack bundle预加载动画

Question

为React webpack bundle预加载动画

Muk*_*uki 4 preload reactjs webpack

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

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

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

Answer 1

Arw*_*ett 5

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

Run Code Online (Sandbox Code Playgroud)

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

编辑:

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

但是,此功能可能仅在现代浏览器中可用,这就是为什么第一种方法应该用作回退方法的原因.然而,好处是,如果您的应用程序处于脱机状态,它仍将播放加载动画并可以提供特定的错误消息.

归档时间：	9 年，8 月前
查看次数：	1710 次
最近记录：	7 年，7 月前