为什么要懒加载？
- 像 vue 这种单页面应用，如果没有应用懒加载，运用 webpack 打包后的文件将会异常的大；
- 进入首页时，需要加载的内容过多，时间过长，会出很长时间的白屏，即使做了 loading 也是不利于用户体验；
- 运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时；
懒加载的实现方案之一
vue 异步组件实现异步加载，组件生成一个 js 文件；
/* vue异步组件技术 */
{
path: '/home',
name: 'home',
component: resolve => require(['@/components/home'], resolve)
},
{
path: '/index',
name: 'Index',
component: resolve => require(['@/components/index'], resolve)
},
{
path: '/about',
name: 'about',
component: resolve => require(['@/components/about'], resolve)
}
懒加载的实现方案之二
es 提案的 import()
// 下面代码，指定了相同的 webpackChunkName，会合并打包成一个 js 文件，把组件按组分块
{
path: '/about',
component: () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/about')
},
{
path: '/index',
component: () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/index')
},
{
path: '/home',
component: () => import(/* webpackChunkName: 'ImportFuncDemo' */ '@/components/home')
}
懒加载的实现方案之三
webpack 的 require.ensure()
//也可实现按需加载，多个路由指定相同的 chunkName,也会打包成一个 js 文件
{
path: '/home',
name: 'home',
component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
},
{
path: '/index',
name: 'Index',
component: r => require.ensure([], () => r(require('@/components/index')), 'demo')
},
{
path: '/about',
name: 'about',
component: r => require.ensure([], () => r(require('@/components/about')), 'demo-01')
}
打赏作者
您的打赏是我前进的动力
微信
支付宝
vue3🛫 CompositionApi：setup、声明周期钩子
上一篇
评论
