标签：you component const def require 加载速度 按需加载 好的 from
一，为什么要使用路由懒加载
为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题
二，懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载
三，常用的懒加载方式有两种：即使用vue异步组件 和 ES6中的import
1、未用懒加载，vue中路由代码如下
1 import Vue from ‘vue‘ 2 import Router from ‘vue-router‘ 3 import HelloWorld from ‘@/components/HelloWorld‘ 4 5 Vue.use(Router) 6 7 export default new Router({ 8 routes: [ 9 { 10 path: ‘/‘, 11 name: ‘HelloWorld‘, 12 component:HelloWorld 13 } 14 ] 15 }) 16
2、vue异步组件实现懒加载
方法如下：component：resolve=>(require([‘需要加载的路由的地址‘])，resolve)
1 import Vue from ‘vue‘ 2 import Router from ‘vue-router‘ 3 /* 此处省去之前导入的HelloWorld模块 */ 4 Vue.use(Router) 5 6 export default new Router({ 7 routes: [ 8 { 9 path: ‘/‘, 10 name: ‘HelloWorld‘, 11 component: resolve=>(require(["@/components/HelloWorld"],resolve)) 12 } 13 ] 14 })
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、基础组件中写法
1 <template> 2 <div class="hello"> 3 <One-com></One-com> 4 1111 5 </div> 6 </template> 7 8 <script> 9 import One from ‘./one‘ 10 export default { 11 components:{ 12 "One-com":One 13 }, 14 data () { 15 return { 16 msg: ‘Welcome to Your Vue.js App‘ 17 } 18 } 19 } 20 </script>
2、const方法，ES 提出的import方法
<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>
标签：you component const def require 加载速度 按需加载 好的 from
原文地址：https://www.cnblogs.com/shun1015/p/12968833.html
