Vue 3源码极客之：`Vue CLI`与`Vite`：两种工具链在开发服务器、打包策略上的根本差异。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女们，大家好！我是你们的老朋友，今天咱们来聊聊Vue 3项目开发中两个重量级的工具链：Vue CLI和Vite。这两位，一个是老牌劲旅，一个是后起之秀，都在Vue生态中扮演着举足轻重的角色。咱们今天就扒一扒它们的底裤，看看它们在开发服务器和打包策略上到底有啥不一样，以及为啥会有这些差异。

开场白：Vue CLI vs Vite，一场工具链的华山论剑

可以把Vue CLI比作一位经验丰富的老司机，啥都见过，啥都能干，但有时候启动速度确实有点慢。Vite呢，就像一个年轻有活力的赛车手，启动速度快得飞起，开发体验贼爽，但是某些配置可能需要自己动手。

咱们先来简单回顾一下它们的基本概念：

Vue CLI: Vue官方提供的脚手架工具，基于Webpack构建。它提供了一套标准的项目结构、开发服务器、构建工具和插件系统，可以帮助开发者快速搭建Vue项目。
Vite: 一种新型前端构建工具，它利用浏览器原生的ES模块特性，实现了闪电般的冷启动速度和模块热更新。

OK，废话不多说，咱们直接进入正题。

第一回合：开发服务器大PK

开发服务器是咱们写代码的时候，能够实时预览效果的关键。Vue CLI和Vite在这方面，可是有着截然不同的实现方式。

Vue CLI (Webpack Dev Server):

Vue CLI 使用的是 Webpack Dev Server。Webpack Dev Server 在内存中构建整个应用，当你修改代码时，它会重新构建整个应用或者部分模块，然后通过 WebSocket 通知浏览器刷新。

简单来说，就是“全量更新”或者“增量更新”。
```
// 假设这是 Vue CLI 配置中的一部分 (vue.config.js)
module.exports = {
  devServer: {
    open: true, // 自动打开浏览器
    host: 'localhost',
    port: 8080,
    // ... 其他配置
  }
}
```
这种方式的优点是配置简单，功能强大，生态完善。但是，当项目越来越大时，Webpack Dev Server 的构建速度就会变得越来越慢，尤其是冷启动的时候，等待的时间可能会让人抓狂。想象一下，你只是改了一行代码，却要等半天才能看到效果，这谁顶得住？
Vite (ES Module + Native ES Build):

Vite 的核心思想是利用浏览器原生的 ES 模块特性。当浏览器请求一个模块时，Vite 才会按需编译该模块。这意味着，只有在你访问的页面用到的模块才会被编译，而那些没用到的模块，Vite 根本不会去管它们。

简单来说，就是“按需编译”。
```
// 假设这是 Vite 的配置文件 (vite.config.js)
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server: {
    open: true,
    host: 'localhost',
    port: 3000,
  }
})
```
Vite 启动时，并不会像 Webpack 那样打包整个应用，而是直接启动一个开发服务器，然后拦截浏览器对模块的请求，并对这些模块进行转换和编译。由于 Vite 只需要编译当前页面用到的模块，所以启动速度非常快，几乎是秒开。

而且，Vite 使用了浏览器原生的 ES 模块特性，这意味着浏览器可以直接识别 ES 模块，而不需要像 Webpack 那样将 ES 模块转换为 CommonJS 模块。这不仅可以提高开发效率，还可以减少打包体积。

第二回合：打包策略大比拼

开发环境爽了，发布环境也不能拉胯。Vue CLI 和 Vite 在打包策略上，也走了不同的道路。

Vue CLI (Webpack):

Vue CLI 依赖 Webpack 进行打包。Webpack 会将你的所有代码（JavaScript、CSS、图片等）打包成一个或多个 bundle 文件，然后部署到服务器上。

Webpack 的打包过程非常复杂，它会分析你的代码依赖关系，然后将所有依赖的模块打包到一个 bundle 文件中。Webpack 还会对代码进行压缩、混淆、优化等处理，以提高应用的性能。
```
// 假设这是 Vue CLI 执行打包的命令
vue-cli-service build
```
Webpack 的优点是功能强大，配置灵活，可以满足各种复杂的打包需求。但是，Webpack 的打包过程比较耗时，尤其是对于大型项目来说，打包时间可能会非常长。

此外，Webpack 的配置也比较复杂，需要学习大量的概念和 API 才能掌握。对于初学者来说，Webpack 可能会是一个比较大的挑战。
Vite (Rollup):

Vite 在生产环境下，默认使用 Rollup 进行打包。Rollup 也是一个模块打包器，但它和 Webpack 的设计理念有所不同。

Rollup 的核心思想是 “tree-shaking”。Tree-shaking 是一种优化技术，它可以移除代码中未使用的部分，从而减小打包体积。
```
// 假设这是 Vite 执行打包的命令
npm run build
```
Vite 利用 Rollup 的 tree-shaking 功能，可以有效地减小打包体积。此外，Vite 还支持各种优化技术，如代码分割、预加载等，可以进一步提高应用的性能。

Vite 的打包速度也比较快，因为它只需要打包当前应用用到的模块，而不需要像 Webpack 那样打包整个应用。

总结：Vue CLI vs Vite，各有千秋

特性	Vue CLI (Webpack)	Vite (Rollup)
开发服务器	Webpack Dev Server (全量/增量更新)	ES Module + Native ES Build (按需编译)
冷启动速度	慢	快 (几乎秒开)
打包策略	Webpack (功能强大，配置复杂)	Rollup (tree-shaking，打包体积小)
适用场景	适合大型项目、需要复杂配置的项目	适合中小型项目、追求快速开发的项目
学习曲线	陡峭	相对平缓

更进一步的思考：为什么会有这些差异？

其实，Vue CLI 和 Vite 的差异，反映了前端构建工具的发展趋势。

早期的前端项目，通常比较简单，只需要将一些 JavaScript、CSS 和图片文件合并成一个 HTML 文件即可。但是，随着前端项目的复杂度越来越高，我们需要更强大的工具来管理代码的依赖关系、优化代码的性能、提高开发效率。

Webpack 就是在这种背景下诞生的。Webpack 提供了一套完整的解决方案，可以满足各种复杂的前端构建需求。但是，Webpack 的配置也比较复杂，学习成本较高。

Vite 则是一种更轻量级的构建工具。它利用浏览器原生的 ES 模块特性，实现了更快的启动速度和更好的开发体验。Vite 的出现，标志着前端构建工具正在朝着更简单、更高效的方向发展。

如何选择：Vue CLI 还是 Vite？

选择 Vue CLI 还是 Vite，取决于你的项目需求和个人偏好。

如果你正在开发一个大型项目，需要复杂的功能和配置，并且对启动速度和打包时间不太敏感，那么 Vue CLI 可能更适合你。
如果你正在开发一个中小型项目，追求快速开发和良好的开发体验，并且对启动速度和打包时间比较敏感，那么 Vite 可能更适合你。
如果你是前端新手，建议先学习 Vue CLI，掌握 Webpack 的基本概念，然后再学习 Vite。这样可以更好地理解前端构建工具的原理和发展趋势。

示例代码：Vite 项目的简单配置

咱们来看一个 Vite 项目的简单配置示例，让你对 Vite 有更直观的了解。

初始化项目:

npm create vite my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

vite.config.js:

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
    open: true,
    host: 'localhost',
    port: 3000,
  },
  resolve: {
    alias: {
      '@': '/src', // 设置 `@` 指向 `src` 目录
    }
  }
})

这个配置文件非常简单，只配置了 Vue 插件、开发服务器和路径别名。相比 Webpack 的配置文件，Vite 的配置文件简洁明了，易于理解。

结束语：拥抱变化，不断学习

前端技术日新月异，新的工具和框架层出不穷。作为前端开发者，我们需要保持学习的热情，不断拥抱变化，才能在这个快速发展的行业中立于不败之地。

希望今天的分享对你有所帮助。下次有机会，咱们再聊聊其他有趣的前端技术。 Bye Bye!

发表回复 取消回复

发表回复取消回复