【实战】用 Vite 5 + Vue 3.4 搭建高性能前端项目：从入门到进阶实战

引言

前端开发领域日新月异，开发工具和框架的更新速度让人应接不暇。最近，Vite 5 和 Vue 3.4 相继发布，带来了许多令人兴奋的新特性。本文将带你从零开始，用最新的 Vite 5 和 Vue 3.4 搭建一个高性能的前端项目，并分享一些进阶的实战技巧和性能优化策略，助你成为更高效的前端开发者！

为什么选择 Vite 5 + Vue 3.4？

1. Vite 5 的新特性

Vite 5 是 Vite 的最新版本，带来了以下改进：

• 更快的冷启动速度：通过优化依赖预构建和缓存机制，Vite 5 的启动速度比之前更快。
• 更好的 SSR 支持：对服务端渲染（SSR）的支持更加完善，适合需要 SEO 优化的项目。
• 内置 WebSocket 断线重连：开发环境下更稳定的热更新体验。

2. Vue 3.4 的新特性

Vue 3.4 是 Vue 3 的最新版本，主要更新包括：

• 性能进一步提升：虚拟 DOM 的 diff 算法优化，渲染性能提升 20%。
• 更强大的 Reactivity 系统：响应式系统的底层实现更加高效。
• TypeScript 支持增强：对 TypeScript 的类型推断更加智能。

实战：从零搭建 Vite 5 + Vue 3.4 项目

第一步：初始化项目

使用 Vite 5 初始化一个 Vue 3.4 项目：

npm create vite@latest my-vue-app --template vue-ts

这里我们选择了 vue-ts 模板，直接集成 TypeScript 支持。

第二步：项目结构解析

初始化完成后，项目结构如下：

my-vue-app/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.ts
│   └── vite-env.d.ts
├── index.html
├── vite.config.ts
└── package.json

• vite.config.ts：Vite 的配置文件，支持 TypeScript。
• src/main.ts：Vue 应用的入口文件，使用 TypeScript 编写。

第三步：开发环境启动

启动开发服务器：

cd my-vue-app
npm install
npm run dev

访问 http://localhost:3000，你会看到一个 Vue 3.4 的欢迎页面。

第四步：集成路由和状态管理

在实际项目中，路由和状态管理是必不可少的。我们使用 vue-router 和 pinia 来实现。

1. 安装依赖：

npm install vue-router pinia

2. 配置路由：
   在 src 目录下创建 router/index.ts 文件：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

3. 配置状态管理：
   在 src 目录下创建 stores/counter.ts 文件：

import { defineStore } from 'pinia';

export const useCounterStore = defineStore('counter', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

4. 在 main.ts 中引入路由和状态管理：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { createPinia } from 'pinia';

const app = createApp(App);
app.use(router);
app.use(createPinia());
app.mount('#app');

第五步：进阶实战技巧

1. 使用 Vite 插件优化开发体验

Vite 的插件生态非常丰富，以下是一些常用的插件：

• unplugin-auto-import：自动导入 Vue、Vue Router 等库的 API，减少手动导入的麻烦。
• vite-plugin-pages：基于文件系统的路由生成，适合大型项目。

安装并配置：

npm install unplugin-auto-import vite-plugin-pages -D

在 vite.config.ts 中配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Pages from 'vite-plugin-pages';

export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: ['vue', 'vue-router'],
    }),
    Pages({
      dirs: 'src/views', // 指定页面目录
    }),
  ],
});

2. 性能优化实战

为了让项目在生产环境中运行得更快，我们可以进行以下优化：

• 代码分割：利用动态导入实现按需加载。
• 图片压缩：使用 vite-plugin-imagemin 插件压缩图片。
• CDN 加速：将第三方库通过 CDN 引入。

在 vite.config.ts 中配置：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import viteImagemin from 'vite-plugin-imagemin';

export default defineConfig({
  plugins: [
    vue(),
    viteImagemin({
      gifsicle: { optimizationLevel: 3 },
      mozjpeg: { quality: 75 },
      pngquant: { quality: [0.8, 0.9] },
    }),
  ],
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
        },
      },
    },
  },
});

3. 单元测试与 E2E 测试

为了保证代码质量，我们可以集成 Vitest（Vite 官方的测试工具）和 Cypress 进行单元测试和 E2E 测试。

1. 安装依赖：

npm install vitest cypress -D

2. 编写单元测试：
   在 src/components/__tests__ 目录下创建一个测试文件：

import { mount } from '@vue/test-utils';
import MyComponent from '../MyComponent.vue';

test('MyComponent', () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.text()).toContain('Hello World');
});

3. 运行测试：

npx vitest

总结

通过本文的实战教程，你不仅学会了如何使用 Vite 5 和 Vue 3.4 搭建一个高性能的前端项目，还掌握了路由、状态管理、性能优化和测试的进阶技巧。Vite 5 和 Vue 3.4 的强大功能让前端开发变得更加高效和愉悦。

如果你对 Vite 5 或 Vue 3.4 有更多疑问，或者有其他前端开发的经验分享，欢迎在评论区留言讨论！关注我，获取更多前端技术干货！ 🚀

---

• 你在使用 Vite 或 Vue 3 时遇到过哪些性能问题？是如何解决的？
• 你觉得 Vite 5 和 Vue 3.4 的哪些新特性最吸引你？
• 如果你有其他前端性能优化的技巧，欢迎分享！
• 后续持续更新前端知识 来个关注吧！