实现路由懒加载的方式有哪些?

1函数式懒加载

使用vue的异步组件和webpack的代码分割功能,通过()=>import()这种函数形式来定义路由组件,示例如下:

复制代码
const Home = () => import('@/views/Home.vue');
const router = new VueRouter({
  routes: [
    { path: '/', component: Home }
  ]
});

2箭头函数结合require

这种方式是利用webpack的代码分割特性,使用箭头函数和require语句来实现懒加载,任意:

复制代码
const Home = resolve => require(['@/views/Home.vue'], resolve);
const router = new VueRouter({
  routes: [
    { path: '/', component: Home }
  ]
});

3命名chunk

通过给import()函数传递一个webpackChunkName注释,可以为懒加载的代码快指定一个名称方便webpack打包后的文件中进行识别和管理,示例如下:

复制代码
const Home = () => import(/* webpackChunkName: "home" */ '@/views/Home.vue');
const router = new VueRouter({
  routes: [
    { path: '/', component: Home }
  ]
});
相关推荐
因吹斯汀2 分钟前
一饭封神:当AI厨神遇上你的冰箱,八大菜系大师在线battle!
前端·vue.js·ai编程
再学一点就睡6 分钟前
NATAPP 内网穿透指南:让本地项目轻松 “走出去”
前端
拜无忧6 分钟前
2025最新React项目架构指南:从零到一,为前端小白打造
前端·react.js·typescript
稻草人不怕疼8 分钟前
记一次从“按钮点不动”到“窗口派发缺失”的排查过程
前端
irving同学4623826 分钟前
TypeORM 列装饰器完整总结
前端·后端·nestjs
彭于晏爱编程29 分钟前
你真的了解 Map、Set 嘛
前端
崔璨33 分钟前
详解Vue3的响应式系统
前端·vue.js
摸鱼的鱼lv33 分钟前
🔥 Vue.js组件通信全攻略:从父子传值到全局状态管理,一篇搞定所有场景!🚀
前端·vue.js
IT_陈寒44 分钟前
Java性能优化:10个让你的Spring Boot应用提速300%的隐藏技巧
前端·人工智能·后端
lichong9511 小时前
【混合开发】vue+Android、iPhone、鸿蒙、win、macOS、Linux之dist打包发布在Android工程asserts里
android·vue.js·iphone