为什么要使用路由懒加载

布满荆棘的人生 2022-10-08 12:25 129阅读 0赞

## 原因 ##

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

## 定义 ##

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

## 使用 ##

常用的懒加载方式有两种：即**使用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('需要加载的模块地址')