vue项目首次加载慢，会出现短暂白屏的情况

<html>
    <style>
        
        body {
            background-color: #EEE;
        }
    
        .loading {
            // .... loading动画样式
            background-image: url("./loading.gif");
        }
    </style>
    <body>
        <div class="loading"></div>
    </body>
</html>

这样页面请求回来的时候就已经有一个加载动画，在缓解加载等待体验。而不是单纯的白屏。

明道_Jerry

804

发布于
2017-11-02

更新于
2017-11-02

（1）给个loading菊花挡一下
（2）考虑对于页面的组件做异步加载
（4）webpack打包优化，减小打包文件体积大小
（3）vuejs路由的懒加载策略
（5）配置vue-cli，利用webpack插件完成模板预加载
（6）考虑服务器渲染首屏骨架页面，或者更复杂的服务器渲染策略ssr，官方有文档

上面5种，实现难度都是逐级增加

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

vue项目首次加载慢，会出现短暂白屏的情况

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何在Vue中点击菜单弹出v-dialog对话框？

如何用Vue实现Word文档自动分页与双页排版功能？

如何实现一个深拷贝函数？

为什么 el-tabl操作列加了 fixed="right"之后列边框线不完整，有大佬知道原因吗？

git提交记录问题？

vue项目首次加载慢，会出现短暂白屏的情况

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何在Vue中点击菜单弹出v-dialog对话框？

如何用Vue实现Word文档自动分页与双页排版功能？

如何实现一个深拷贝函数？

为什么 el-tabl操作列加了 fixed="right"之后 列边框线不完整，有大佬知道原因吗？

git提交记录问题？

为什么 el-tabl操作列加了 fixed="right"之后列边框线不完整，有大佬知道原因吗？