在 Vue.js 中,路由懒加载(也称为代码分割)是一种优化策略,它允许你将 Vue 组件分割成不同的代码块,并在需要时按需加载它们。这有助于减少初始加载时间,提高用户体验。
Vue Router 支持 Webpack 的动态 import() 语法来实现路由懒加载。以下是如何在 Vue 项目中使用路由懒加载的步骤:
-  确保你的项目已经设置了 Webpack:Webpack 是 Vue CLI 项目的默认打包工具,它支持动态 import()语法。
-  在路由配置文件中使用动态 import():在你的路由配置文件中(通常是src/router/index.js),你可以使用动态import()语法来加载组件。
| import Vue from 'vue'  | |
| import Router from 'vue-router'  | |
| Vue.use(Router)  | |
| const router = new Router({  | |
| routes: [  | |
| {  | |
| path: '/',  | |
| name: 'home',  | |
| component: () => import('@/views/Home.vue') // 使用动态 import()  | |
| },  | |
| {  | |
| path: '/about',  | |
| name: 'about',  | |
| component: () => import('@/views/About.vue') // 使用动态 import()  | |
| },  | |
| // 其他路由...  | |
| ]  | |
| })  | |
| export default router | 
注意:@ 符号是 Vue CLI 项目的别名,它通常指向 src 目录。所以 @/views/Home.vue 会被解析为 src/views/Home.vue。
 3. 构建你的项目:当你运行 npm run build 或 yarn build 命令时,Webpack 会自动将你的组件分割成不同的代码块,并在需要时加载它们。
 4. 查看构建结果:你可以在构建后的 dist 目录(或你指定的其他目录)中查看生成的 HTML 和 JavaScript 文件。你应该会看到除了主 JavaScript 文件之外,还有一些以组件名称命名的代码块文件(例如 Home.js、About.js 等)。
 5. 在浏览器中测试:在浏览器中打开你的应用,并检查网络请求。你应该会看到,当你访问不同的路由时,只有相应的组件代码块文件会被加载。
通过这种方式,你可以有效地减少初始加载时间,并提高你的 Vue 应用的性能。