发布时间:2024-02-08 16:30
vue-router路由懒加载及实现方式。
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-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)}
]
}
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文件
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}
【规划】Box2d::HasOverlap() 碰撞检测接口详解
STC8H开发(十三): I2C驱动DS3231高精度实时时钟芯片
数据质量管理工具预研——Griffin VS Deequ VS Great expectations VS Qualitis
在 vue eslint 报错 error “Component name “*****“ should always be multi-word”,该怎么办?
OpenHarmony解读之设备认证:数据接收管理-消息处理(1)
A Survey on Graph Structure Learning: Progress and Opportunities