zoukankan      html  css  js  c++  java
  • 一、为什么要使用路由懒加载

    为给客户更好的客户体验,首屏组件加载速度更快一些,解决白屏问题。

    二、定义

      懒加载简单来说就是延迟加载或按需加载,即在需要的时候的时候进行加载。

    三、使用

      常用的懒加载方式有两种:即使用vue异步组件 和 ES中的import

    1、未用懒加载,vue中路由代码如下

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
    Vue.use(Router)
    
    export default new Router({
       routes: [{
            path: '/',
            name: 'HelloWorld',
            component:HelloWorld
        }]
    })

    2、vue异步组件实现懒加载

        方法如下:component:resolve=>(require(['需要加载的路由的地址']),resolve)

    import Vue from 'vue'
    import Router from 'vue-router'
      /* 此处省去之前导入的HelloWorld模块 */
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: resolve=>(require(["@/components/HelloWorld"],resolve))
        }
      ]
    })

    3、ES 提出的import方法,(------最常用------)

        方法如下:const HelloWorld = ()=>import('需要加载的模块地址')

        (不加 { } ,表示直接return)

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    const HelloWorld = ()=>import("@/components/HelloWorld")
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })

    四、组件懒加载

     相同与路由懒加载,

    1、原来组件中写法

    <template>
      <div class="hello">
      <One-com></One-com>
      1111
      </div>
    </template>
    
    <script>
    import One from './one'
    export default {
      components:{
        "One-com":One
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    2、const方法

    <template>
      <div class="hello">
      <One-com></One-com>
      1111
      </div>
    </template>
    
    <script>
    const One = ()=>import("./one");
    export default {
      components:{
        "One-com":One
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    3、异步方法

    <template>
      <div class="hello">
      <One-com></One-com>
      1111
      </div>
    </template>
    
    <script>
    export default {
      components:{
        "One-com":resolve=>(['./one'],resolve)
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>

    五、总结:

    路由和组件的常用两种懒加载方式:

    1、vue异步组件实现路由懒加载

      component:resolve=>(['需要加载的路由的地址',resolve])

    2、es提出的import(推荐使用这种方式)

      const HelloWorld = ()=>import('需要加载的模块地址')
    转载:https://www.cnblogs.com/xiaoxiaoxun/p/11001884.html

  • 相关阅读:
    java定时读取文件
    Java面试:投行的15个多线程和并发面试题(转)
    读取一个文件,给定一个字符串,判断这个字符串在文件中出现的次数
    随机产生10个数,并每个数给定一个序号,然后将这10个数按照从小到大的顺序输出来,并带上序号输出
    找出给定字符串中出现最多的字符和次数
    公司开发部门GIT与SVN 之争
    浅谈Hibernate中的三种数据状态
    MyBatis框架的XML数据访问Dao层接口的组合使用
    浅谈WebLogic和Tomcat
    为什么我们不要 .NET 程序员
  • 原文地址:https://www.cnblogs.com/web-record/p/12705184.html
Copyright © 2011-2022 走看看