vue项目实现路由按需加载(路由懒加载)的3种方式，高级前端面试题及答案2024

2. es提案的import()

3. webpack的require,ensure()

1 . vue异步组件技术 ==== 异步加载

---

vue-router配置路由 , 使用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) }

非懒加载：

---

懒加载

---

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

---

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

// 下面2行代码