# todos

**Repository Path**: johnstonguo/todos

## Basic Information

- **Project Name**: todos
- **Description**: 代办vue2案例
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-04-23
- **Last Updated**: 2025-04-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue2 todos案例 路由router和route

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

# 部分笔记
## 引入路由组件时的三种方式
在 Vue Router 的路由配置中，引入组件的三种方式主要区别在于代码打包方式和加载时机，这会影响应用的性能和初始加载时间。具体分析如下：

---

1. **静态导入（直接 `import`）**
```javascript
import SchoolDemo from "@/components/SchoolDemo.vue";
import StudentDemo from "../components/StudentDemo.vue";

// 路由配置中直接引用
{ path: "/school", component: SchoolDemo },
{ path: "/student", component: StudentDemo }
```
• 特点：

  • 组件会在主包（如 `app.js`）中打包。

  • 无论用户是否访问该路由，组件代码都会在初始加载时下载。

• 适用场景：

  • 核心功能或高频访问的页面（如首页）。

  • 对首屏加载性能要求不苛刻的场景。


---

2. **动态导入（箭头函数 + `import()`）**
```javascript
{
  path: "/",
  component: () => import("../components/HelloWorld.vue")
},
{
  path: "/todos",
  component: () => import("../components/todos/TodosApp.vue")
}
```
• 特点：

  • 组件会被单独打包为独立的 chunk 文件（如 `0.js`、`1.js`）。

  • 按需加载：只有当用户访问对应路由时，才会下载该组件的代码。

  • 显著减少主包体积，提升首屏加载速度。

• 适用场景：

  • 非核心功能或低频访问的页面（如设置页、详情页）。

  • 对首屏性能要求较高的场景。


---

3. **混合导入（静态导入 + 动态导入）**
代码中同时存在两种方式，但本质上仍是上述两种情况的组合。

---

关键区别总结
| 方式     | 打包位置          | 加载时机           | 性能影响               |
|--------------|-------------------|--------------------|------------------------|
| 静态导入     | 主包（`app.js`）  | 初始加载时立即加载 | 增大主包体积，影响首屏 |
| 动态导入     | 独立 chunk 文件   | 路由访问时按需加载 | 优化首屏，增加后续请求 |

---

最佳实践
• 核心路由（如首页）使用静态导入，确保快速渲染。

• 非核心路由（如子页面）使用动态导入，优化首屏性能。

• 结合 Webpack 的预加载策略（如 `/* webpackPrefetch: true */`）进一步优化用户体验。


通过合理选择导入方式，可以在代码分割和加载性能之间取得平衡。