发表新帖
发表新帖

Preloading animation for React webpack bundle

前端 未结
关注
2 1382
没有蜡笔的小新
没有蜡笔的小新 2021-01-20 00:57

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

相关标签:
2条回答
  • 深忆病人
    2021-01-20 01:09

    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.

    0 讨论(0)
  • 庸人自扰
    2021-01-20 01:16

    I also encountered with this question with one exception: I wanted to display a loading progress bar. I ended up writing a webpack plugin and a custom asset bootloader. Check out my demo project repository.

    Here is the result:

    0 讨论(0)
 看不清?
提交回复
热议问题