vue实现路由懒加载的三种方式:
1.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')}
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的文件名
————————————————
原文链接:https://blog.csdn.net/weixin_42464106/article/details/125992612