阅读 1127

vue路由懒加载及组件懒加载

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

1、vue异步组件实现路由懒加载 component:resolve=>(['需要加载的路由的地址',resolve])

2、es提出的import(推荐使用这种方式) const HelloWorld = ()=>import('需要加载的模块地址')

1. 路由懒加载


1.1 为什么要使用路由懒加载?

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

1.2 定义

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

1.3 使用

未用懒加载,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
        }
    ]
})
复制代码

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))
    }
  ]
})
复制代码

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

方法如下:const HelloWorld = ()=>import('需要加载的模块地址') (不加 { } ,表示直接return)

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: ()=>import("@/components/HelloWorld")
    }
  ]
})
复制代码

webpack提供的require.ensure()

{
  path: '/home',
  name: 'Home',
  component: r => require.ensure([],() =>  r(require('@/components/HelloWorld')), 'home')
}
复制代码

2. 组件懒加载


原来组件中写法

<template>
  <div class="hello">
    <One-com></One-com>
  </div>
</template>

<script>
import One from './one'
export default {
  components:{
    "One-com":One
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
复制代码

ES 提出的import方法

<template>
  <div class="hello">
    <One-com></One-com>
  </div>
</template>

<script>
export default {
  components:{
    "One-com": ()=>import("./one");
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
复制代码

异步方法

<template>
  <div class="hello">
    <One-com></One-com>
  </div>
</template>

<script>
export default {
  components:{
    "One-com":resolve=>(['./one'],resolve)
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>
复制代码

点击查看原文

如果本文对你有所帮助,感谢点一颗小心心,您的支持是我继续创作的动力! 最后:写作不易,如要转裁,请标明转载出处。

文章分类
前端
文章标签