路由懒加载
在 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 应用的性能。