Vue路由懒加载

Posted 2023-04-03 何极光

1、vue异步组件技术——异步加载

vue-router配置路由，使用vue的异步组件技术，可以实现按需加载。此时，一个组件将生成一个js文件。

/* vue异步组件技术 */
 path: '/home', name: 'home', component: resolve => require(['@/components/home'],resolve) 

2、组件懒加载方案二——路由懒加载(使用import)

const 组件名=() => import('组件路径');

3、webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技术，也可以实现按需加载。
这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

// r就是resolve
const list = r => require.ensure([], () => r(require('../components/list/list')), 'list');

4、总结

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

1、vue异步组件实现路由懒加载

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

2、es提出的import(推荐使用这种方式)

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

一、为什么要使用路由懒加载
　为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。
二、定义
　懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
三、使用
　 常用的懒加载方式有两种：即使用vue异步组件和ES中的import

路由懒加载及实现方式(vue-router)

vue-router路由懒加载及实现方式。

文章目录

前言

一、路由懒加载

二、实现路由懒加载

1.Vue异步组件(异步加载)

2.推荐方式-ES6的import()

 3.webpack提供的require.ensure()实现懒加载

---

前言

什么是路由懒加载？--延迟加载，在需要的时候才会进行加载。

---

一、路由懒加载

         我们在路由中通常会定义很多不同的页面。如果不应用懒加载的话，很多页面都会打包到同一个js文件中，文件将会异常的大。造成进入首页时，需要加载的内容过多，时间过长，在浏览器中可能会出现短暂的空白页，从而降低用户体验，而运用路由懒加载是将各个模块分开打包，用户查看的时候再加载对应的模块，减少加载用时。

也就是说：一开始进入页面时不需要一次性把资源都加载完，需要时在加载对应的资源。 

二、实现路由懒加载

 路由懒加载的主要作用是将 路由对应的组件打包成一个个的js代码块。只有在这个路由被访问到的时候，才会加载对应组件的代码块。

//非路由懒加载
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import Login from '@/components/Login'
import New from '@/components/New'
import List from '@/components/List'

......

routes:[
    path:'/Login',name:'Login',component:Login,
    path:'/',name:'Home',component:Home,
    ...
]

vue实现路由懒加载的三种方式： 

• Vue异步组件
• ES6的import()
• webpack的require.ensure() 

1.Vue异步组件(异步加载)

vue-router 配置路由，使用vue的异步组件技术，可以实现懒加载，但是这种情况是一个组件会生成一个js文件。

component:resolve => require(['需要加载的组件地址'],resolve) 

path:'/login',name:'Login',
    component:resolve => require(['@/components/Login'],resolve),
path:'/home',name:'Home',
    component:resolve => require(['@/components/Home'],resolve),
    children:[
        path:'/new',name:'New',
            component:resolve =>require(['@/components/New'],resolve),
        path:'/list',name:'List',
            component:resolve => require(['@/components/List'],resolve)
    ]
 

2.推荐方式-ES6的import()

const 组件名 = () => import('组件路径')

//下面没有指定webpackChunkName,每个组件打包成一个js文件
const Foo = () => import('../components/Foo')
const Aoo = () => import('../components/Aoo')

 指定相同的webpackChunkName，会合并打包成一个js文件

const Foo = () => import(/*webpackChunkName:'ImportFuncDemo'*/,'../components/Foo');
const Aoo - () => import(/*webpackChunkName:'ImportFuncDemo'*/,'../components/Aoo')
...
path:'/Foo',name:'Foo',component:Foo,
path:'/Aoo',name:'Aoo',component:Aoo,
path:'/Login',name:'Login',
    component: ()=>import(/*webpackChunkName:"ImportFuncDemo"*/,'../compontents/Login')

 上面代码中，webpackChunkName值相同的会打包成一个js文件

 3.webpack提供的require.ensure()实现懒加载

vue-router 配置路由，使用webpack的require.ensure技术，可以实现懒加载，这种情况下，多个路由指定相同的chunkName，会合并打包成一个js文件。

require.ensure可实现按需加载资源，包括js，css等，会给里面require的文件单独打包，不会合主文件打包在一起。 

path:'/home',name:'home',component:r=>
    require.ensure([],()=>r(require('@/components/home')),'funcDemo'),
path:'/new',name:'new',component:r=>
    require.ensure([],()=>r(require('@/components/new')),'funcDemo'),
path:'/list',name:'list',component:r=>
    require.ensure([],()=>r(require('@/components/list')),'listDemo'),

注：r就是resolve 

const list = r => require.ensure([],()=>r(require('组件地址')),'list') 

 第一个参数是数组，表明第二个参数里需要依赖的模块，这些会提前加载。

第二个是回调函数,在这个回调函数里面require的文件会被单独打包成一个chunk,不会和主文件打包在一起，这样就生成了两个chunk,第一次加载时只加载主文件。

第三个参数是错误回调。 

第四个参数是单独打包的chunk的文件名 

const  Coo = resolve=>
 require.ensure([],()=>resolve(require('@/components/List')))


...
path:'/list',name:'List',component:Coo

---