Vue路由懒加载与组件懒加载

Posted 2021-07-07 哈娄

为了提升首屏加载速度，我们在项目中可以使用路由的懒加载来优化，解决加载过程中 白屏时间长问题

路由懒加载代码：

• 异步组件懒加载方式（ component：resolve=>(require(['需要加载的路由的地址'])，resolve) ）

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: resolve=>(require(["@/components/HelloWorld"],resolve))
    }
  ]
})

•  es6的import方式 ( const HelloWorld = （）=>import('需要加载的模块地址') )

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
    }
  ]
})

组件懒加载代码：

• 异步写法 

<template>
  <div class="hello">
      <Test></Test>
  </div>
</template>

<script>
export default {
  components:{
    "Test":resolve=>(['./test'],resolve)
  },
  data () {
    return {
      msg: ''
    }
  }
}
</script>

•  es6的import方式

<template>
  <div class="hello">
      <Test></Test>
  </div>
</template>

<script>
const test = ()=>import("./test");
export default {
  components:{
    "Test":test
  },
  data () {
    return {
      msg: ''
    }
  }
}
</script>