1.路由懒加载

1.1 什么是路由懒加载

当我们点击网页进去，整个网页默认是加载所有的的页面，在网页上元素较少时，网页加载的速度不会很慢。但当网页越复杂，加载所有的页面所需要的时间也会越来越长，此时我们点击进去网页会有一段白屏的时间。所以为了给用户更好的使用体验，减少白屏的时间，我们在项目中需要使用路由懒加载
路由懒加载：只加载你当前点击的那个模块。按需去加载路由对应的资源，提高首屏的加载速度

1.2 使用

未使用路由懒加载

import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.useAttrs(Router)

export default new Router({
    routes:[
        {
            path:'/',
            name:'HelloWorld',
            component:'HelloWorld'
        }
    ]
})

import异步加载法（最常用）
使用方法：compont: ( ) => import{‘所需要加载模块的地址’}

import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.useAttrs(Router)

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

require异步加载法
component：resolve=>(require(['需要加载的路由的地址'])，resolve)

import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.useAttrs(Router)

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

2.组件懒加载

未使用懒加载

  <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>

import

  <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>

require异步加载法

  <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>

import与require的区别

相同点：require异步加载法与import都是将组件信息打包在同一个js文件中
不同的：require是将组件信息当成字符串，减少了js文件的大小，加快了js文件的运行编译速度