vue首次加载网页的loading

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue首次加载网页的loading相关的知识,希望对你有一定的参考价值。

参考技术A 在index.html中,直接丢在app里,因为首次加载的时候app里的元素都还没有挂载,所以会显示loading的div出来。当vue挂载完dom之后,就会自动替换掉app这个div里的内容。自然loading的div就没了。所以也不需要我们收东西关闭。非常简单方便实用

vue--按需加载的3种方式(解决网页首次加载速度慢的问题)

一、vue的异步组件加载

使用异步组件加载,打包的时候会将每个组件分开打包到不同的js文件中:

  path: /index, name: index,
    meta:
      title:首页,
      requireAuth:true
    ,
    /*这是异步加载组件,当你访问时 ,才会加载 ,vue-router中,require代替import解决vue项目首页加载时间过久的问题*/
    component: resolve => 
      clearTimeout(_pageTimer);
    //这里是设置定时器,超过时间,如果没有被停止,则输出“网络加载超时” _pageTimer
= setTimeout(function () tipsCallback();//作用输出字符串提示 ,timeout); require([@/page/index/index.vue], function (component)
     //在组件加载完后,如果定时器存在,则清除定时器。
if(_pageTimer)clearTimeout(_pageTimer); resolve(component) ) ,

 

二、ES新提案:import()——动态加载ES模块

官方推荐使用这种方式,注意如果你希望在Vue router 的路由组件中使用这种语法的话,你必须使用 Vue Router 2.4.0+ 版本。

        
          path: ‘/index‘,
          component: () => import(@/page/index/index),
          name: 首页
        ,

 

三、webpack提供的require.ensure()

语法:require.ensure(dependencies: String[], callback: function(require), chunkName: String)

1、dependencies:依赖   

这是一个字符串数组,通过这个参数,在所有的回调函数的代码被执行前,我们可以将所有需要用到的模块进行声明。

2、callback:回调 

当所有的依赖都加载完成后,webpack会执行这个回调函数。require 对象的一个实现会作为一个参数传递给这个回调函数。因此,我们可以进一步 require() 依赖和其它模块提供下一步的执行。

3、chunkName:chunk名称

chunkName 是提供给这个特定的 require.ensure() 的 chunk 的名称。通过提供 require.ensure() 不同执行点相同的名称,我们可以保证所有的依赖都会一起放进相同的 文件束(bundle)。

 path: /index, component: r => require.ensure([], () => r(require(@/pages/index/index)), index), meta:  title: ‘首页  

这里只是做记录使用。

以上是关于vue首次加载网页的loading的主要内容,如果未能解决你的问题,请参考以下文章

vue网站优化秒开网页

html首次加载刷新一次才更新成最新页面,如何处理

vue-router路由懒加载(解决vue项目首次加载慢)

vue 首次加载缓慢/刷新后加载缓慢 原因及解决方案

如何处理前端页面首次加载慢的问题

vue页面首次加载缓慢原因及解决方案