在 Vue 3 中，如何利用 `Vite` 实现极速开发体验，并与 `Webpack` 构建的项目进行比较？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，老铁们，晚上好！我是你们的老朋友，今晚咱们来聊聊 Vue 3 + Vite 带来的丝滑开发体验，顺便 diss 一下老大哥 Webpack。保证你听完之后，直接把Webpack踹进垃圾桶（开玩笑，具体情况具体分析嘛！）。

开场白：告别漫长等待，拥抱极速起飞！

相信大家都遇到过这样的场景：改了一行代码，然后对着屏幕发呆，等待 Webpack 慢悠悠地编译，仿佛时间静止，人生都开始怀疑。这感觉，简直比等待女神回复信息还煎熬！

但是，自从有了 Vite，妈妈再也不用担心我的编译速度了！Vite 凭借其独特的优势，让 Vue 3 项目的开发体验提升了不止一个档次。今天，我们就来好好剖析一下 Vite 的魅力所在。

第一部分：Vite 凭什么这么快？—— 原理揭秘

Webpack 和 Vite 的核心区别，可以用一句话概括： Webpack 先打包，再启动；Vite 先启动，再按需编译。

Webpack 的打包模式：

Webpack 就像一个勤劳的搬运工，在启动开发服务器之前，它会把你的所有代码，包括 Vue 组件、JavaScript、CSS、图片等等，全部打包成一个或多个 bundle 文件。每次你修改代码，Webpack 都需要重新打包，即使你只改了一行字！这就像你每次出门都要把整个家当都搬一遍，累不累？
Vite 的按需编译模式：

Vite 则更加聪明，它利用了浏览器原生支持 ES Modules 的特性，在启动开发服务器时，并不进行打包。而是直接利用浏览器去加载 ES Modules。当浏览器请求某个模块时，Vite 才会对该模块进行编译，也就是所谓的“按需编译”。这就像你出门只带需要的东西，轻装上阵，当然速度更快！

为了更直观地理解，我们用一个表格来对比一下：

特性	Webpack	Vite
打包方式	预先打包 (Pre-bundling)	按需编译 (On-demand compilation)
启动速度	慢	快
热更新	相对较慢	极快
模块处理	所有模块打包成 bundle	利用浏览器原生 ES Modules
适用场景	大型项目，需要优化打包体积的生产环境	中小型项目，注重开发效率的开发环境

第二部分：Vite + Vue 3 实战：手把手教你起飞

说了这么多理论，不如直接上手实操。下面，我们就来创建一个基于 Vite 的 Vue 3 项目，感受一下飞一般的速度。

创建项目：

打开你的终端，输入以下命令：
```
npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev
```
这几行代码，会帮你创建一个名为 my-vue-app 的 Vue 3 项目，然后安装依赖，最后启动开发服务器。整个过程，行云流水，一气呵成，快到你怀疑人生！

项目结构：

Vite 创建的项目结构非常简洁明了：

my-vue-app/
├── index.html         # 入口 HTML 文件
├── src/
│   ├── App.vue        # 根组件
│   ├── assets/        # 静态资源目录
│   ├── components/    # 组件目录
│   ├── main.js        # 入口 JavaScript 文件
│   └── style.css      # 全局样式文件
├── vite.config.js   # Vite 配置文件
├── package.json       # 项目依赖配置文件
└── ...

是不是感觉神清气爽？没有各种复杂的配置文件，一切都那么清晰易懂。

修改代码，体验极速热更新：

打开 src/App.vue 文件，随便修改一下里面的文字，比如把 "Hello Vite + Vue 3" 改成 "Hello Vite + Vue 3, I’m flying!"。然后保存，你会发现，浏览器几乎瞬间就更新了！这就是 Vite 的极速热更新，让你告别漫长等待，专注于代码本身。
```
<template>
  <h1>Hello Vite + Vue 3, I'm flying!</h1>
</template>

<script>
export default {
  name: 'App'
}
</script>
```

使用第三方库：

Vite 对第三方库的支持也非常好。比如，我们想使用 axios 来发送 HTTP 请求，只需要先安装它：

npm install axios

然后，在你的 Vue 组件中直接 import 使用即可：

<template>
  <div>
    <button @click="getData">Get Data</button>
    <p>{{ data }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      data: null
    }
  },
  methods: {
    async getData() {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/todos/1');
        this.data = response.data;
      } catch (error) {
        console.error(error);
      }
    }
  }
}
</script>

Vite 会自动处理 axios 的依赖，无需任何额外的配置。

第三部分：Vite 的进阶玩法：配置文件详解

Vite 的配置文件是 vite.config.js，它允许你自定义 Vite 的行为。虽然 Vite 的默认配置已经足够好用，但在某些情况下，你可能需要修改它。

下面是一些常用的配置选项：

root： 指定项目的根目录。默认值为当前工作目录。

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

export default defineConfig({
  root: './src' // 指定 src 目录为根目录
})

base： 指定项目的公共基础路径。如果你的项目部署在子目录下，比如 /my-app/，你需要设置 base 为 /my-app/。
```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  base: '/my-app/'
})
```

plugins： 配置 Vite 插件。 Vite 插件可以扩展 Vite 的功能，比如支持 Vue 3 的单文件组件、自动导入组件、压缩图片等等。

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

export default defineConfig({
  plugins: [
    vue(), // 官方 Vue 3 插件
    // 其他插件
  ]
})

server： 配置开发服务器。比如，你可以修改端口号、设置代理等等。

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

export default defineConfig({
  server: {
    port: 3000, // 修改端口号
    proxy: { // 设置代理
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, '')
      }
    }
  }
})

build： 配置构建选项。比如，你可以指定输出目录、压缩代码等等。

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

export default defineConfig({
  build: {
    outDir: 'dist', // 指定输出目录
    minify: 'terser' // 使用 terser 压缩代码
  }
})

第四部分：Vite vs Webpack：没有永远的神！

虽然 Vite 在开发体验上完胜 Webpack，但 Webpack 仍然有其存在的价值。它们各自适用于不同的场景。

特性	Vite	Webpack
开发速度	极快	慢
构建速度	相对较慢	较快
生态系统	相对较小	非常完善
适用场景	中小型项目，注重开发效率	大型项目，需要优化打包体积的生产环境
学习曲线	简单易上手	相对复杂

Vite 的优势：
- 极速的开发体验： Vite 的按需编译和极速热更新，让你告别漫长等待，专注于代码本身。
- 更简洁的配置： Vite 的默认配置已经足够好用，即使需要自定义，配置文件也相对简单易懂。
- 更现代化的技术栈： Vite 基于浏览器原生 ES Modules，更加符合现代前端开发的趋势。
Webpack 的优势：
- 更完善的生态系统： Webpack 拥有庞大的插件生态系统，可以满足各种各样的需求。
- 更强大的打包能力： Webpack 可以对代码进行深度优化，比如代码分割、Tree Shaking 等，从而减小打包体积。
- 更成熟的生产环境解决方案： Webpack 在生产环境的稳定性和可靠性，经过了长时间的验证。

结论：拥抱变化，选择最适合自己的工具！

总而言之，Vite 和 Webpack 都是非常优秀的构建工具。 Vite 在开发体验上更胜一筹，而 Webpack 在生产环境的稳定性和可靠性方面更具优势。选择哪个工具，取决于你的具体项目需求和个人偏好。

如果你正在开发一个中小型项目，并且注重开发效率，那么 Vite 绝对是你的首选。如果你正在开发一个大型项目，并且需要对打包体积进行深度优化，那么 Webpack 仍然是一个不错的选择。

记住，没有永远的神！拥抱变化，不断学习新的技术，才能在前端的世界里立于不败之地！

最后的彩蛋：VitePress 和 Astro

除了 Vite 之外，还有一些基于 Vite 的优秀项目，比如 VitePress 和 Astro。

VitePress： 一个基于 Vite 的静态站点生成器，非常适合用来构建文档网站、博客等等。
Astro： 一个现代化的 Web 框架，可以让你构建快速、静态优先的网站。

这两个项目都充分利用了 Vite 的优势，提供了非常优秀的开发体验。如果你对它们感兴趣，不妨去了解一下。

好了，今天的分享就到这里。希望大家能够喜欢 Vite，并且在实际项目中灵活运用。感谢大家的聆听！祝大家早日成为前端大神！拜拜！

发表回复 取消回复

发表回复取消回复