前言

关于前端构建工具，先有 gulp、grunt、webpack，现在尤大大又整了一个 vite；

或许有同学会疑问，这么多构建工具为什么只有 vite 快，那么我们为什么要使用 vite，以及到底该选哪一个呢？

这篇文章将会给你答案，并且让你在前端的路上渐行渐远；

闲话少说，直接开干 ~

通过这篇文章你将学到什么？

1. Vite 简介

1.1 什么是 Vite

Vite(读音类似于[weɪt]，轻量，轻快的意思) 是一个由原生 ES Module 驱动的 Web 开发前端构建工具。

在开发环境（Development） 下基于浏览器原生 ES Module 开发，完全跳过了打包这个概念；

在生产环境（Production） 下基于 Rollup 打包来构建代码。

1.2 Vite 的主要特性

• 💡 极速的服务启动： 使用原生 ESM 文件，无需打包！
• ⚡️ 轻量快速的热重载： 无论应用程序大小如何，都始终极快的模块热重载（HMR）
• 🛠️ 丰富的功能： 对 TypeScript、JSX、CSS 等支持开箱即用。
• 📦 优化的构建：可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
• 🔩 通用的插件： 在开发和构建之间共享 Rollup-superset 插件接口。
• 🔑 完全类型化的API：灵活的 API 和完整 TypeScript 类型

1.3 浏览器支持

• 开发环境中：Vite 需要在 支持原生 ES 模块动态导入 的浏览器中使用。
• 生产环境中：默认支持的浏览器需要支持 通过脚本标签来引入原生 ES 模块 。可以通过官方插件 @vitejs/plugin-legacy 支持旧浏览器。

2. Vite 的优势

• 上手非常简单
• 开发效率极高
• 社区成本低（兼容绝大部分 rollup 插件）

2.1 开发效率极高 —— 🚀 般的速度

2.1.1 对比常用的 Webpack

工具名称	开发环境（Dev）	Dev 启动时长 (20个组件)	热更新 (HMR)	生产环境（Production）	Build 时长
Webpack	会先打包生成 bundle，再启动开发服务器	3124ms	HMR 时需要把改动模块及相关依赖全部编译	打包生成 bundle	9125ms
Vite	先启动开发服务器，利用新一代浏览器的 ESM 能力，无需打包，直接请求所需模块并实时编译	353ms	HMR时只需让浏览器重新请求该模块，同时利用浏览器的缓存（源码模块协商缓存，依赖模块强缓存）来优化请求；使得无论应用大小如何，HMR 始终能保持快速更新。	通过成熟的 rollup 打包工具来生成 bundle	4471ms

从图中对比我们可以很明显的发现，为什么 Vite 会较于 Webpack 快那么多了；

Vite 在开发环境冷启动无需打包，无需分析模块之间的依赖，同时也无需在启动开发服务器前进行编译，启动时还会使用 esbuild 来进行预构建；（如下图基于原生 ESM 的开发服务流程图）

Webpack 在启动后会做一堆事情，经历一条很长的编译打包链条，从入口开始需要逐步经历语法解析、依赖收集、代码转译、打包合并、代码优化，最终将高版本的、离散的源码编译打包成低版本、高兼容性的产物代码，这可满满都是 CPU、IO 操作啊，在 Node 运行时下性能必然是有问题。（如下图基于 bundle 的开发服务流程图）

当然我们只做了与前端使用率最高，名气最大的 webpack 的对比，像其它构建工具如 Browserify、Gulp、Parcel、Rollup、Snowpack 几乎都是可以类似对比处理。

2.2 上手极其简单

2.2.1 傻瓜式命令初始化

Vite2.x 需要 Node.js 版本 >= 12.0.0

Vite3.x 不再支持 Node.js 12，现在需要 Node.js 14.18+

简单一句话概括，如果说你会使用 vue-cli 脚手架，那么这个 Vite 构建工具你几乎可以无缝插入；

 # npm
 npm init vite@latest
 ​
 # yarn
 yarn create vite
 ​
 # pnpm
 pnpm create vite

Done !

然后按照提示选择你所需要创建的项目即可。

2.2.2 配置极其简单

相比 webpack（或者底层依赖 Webpack 的 vue-cli）， 需要对 entry、loader、plugin 等进行诸多配置，实际的构建工作通常由各种 webpack loader、plugin 实现；

Vite 的使用可谓是相当简单了；只需执行初始化命令，就可以得到一个预设好的开发环境，开箱即获得一堆功能，包括：css 预处理、html 预处理、异步加载、分包、压缩、HMR支持、默认 chunk hash 命名 等。

简单说吧，Vite 的定位就是傻瓜且强大的构建工具，只需你心无旁骛的写好业务代码，然后早点下班，不加班，也不用再为了工具费神费力了。

2.3 社区成本低

除了极致的运行性能与简易的使用方法外，Vite 对已有生态的兼容性也不容忽略，主要体现在 两个点：

• 与 Vue 解耦，兼容支持 React、Svelte、Preact、Vanilla 等，这意味着 Vite 可以被应用在大多数现代技术栈中
• 与 Rollup 极其接近的插件接口，这意味着可以复用 Rollup 生态中大部分已经被反复锤炼的工具

讲真的，这两条摆上桌面，加上前面讨论的 性能优势 和 超低学习成本，你还有什么拒绝的理由呢？

3. Vite 快速入门

依赖版本

• Vite: v2.8.0

• Node: v12.20.0

初始化项目

# npm 
npm init vite@latest 

# yarn 
yarn create vite 

# pnpm 
pnpm create vite

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

 # npm 6.x
 npm init vite@latest my-vue-app --template vue
 
 # npm 7+, 需要额外的双横线：
 npm init vite@latest my-vue-app -- --template vue
 
 # yarn
 yarn create vite my-vue-app --template vue
 
 # pnpm
 pnpm create vite my-vue-app -- --template vue

注意：在 Vite 中所选择的 template 的 vue 模板默认是 vue3 的版本；

4 创建 Vue3 项目

4.1 初始化

 # npm
 npm init vite@latest

 # yarn
 yarn create vite

 # pnpm
 pnpm create vite

4.2 输入项目名

 ? Project name:  vite-vue3

4.3 选择一个框架（vue）

 ? Select a framework: » - Use arrow-keys. Return to submit.
     vanilla // 原生js
 >   vue     // 默认就是 vue3
     react   // react
     preact  // 轻量化react框架
     lit     // 轻量级web组件
     svelte  // svelte框架

4.4 是否使用 typescript

 ? Select a variant: › - Use arrow-keys. Return to submit.
     vue
 ❯   vue-ts

4.5 启动项目

 cd vite-vue3 && npm install && npm run dev

即可在 scr 目录下进行开发啦 ~

5 创建 Vue2 项目

5.1 初始化（同Vue3）

 npm init vite@latest

5.2 输入项目名：vite-vue2

5.3 选择一个框架：vanilla

5.4 选择完成之后

 cd vite-vue2 && npm install && npm install vite-plugin-vue2 vue-template-compiler -D

5.5 新建 vite.config.js 文件

 // 1. 新建: touch vite.config.js 
 ​
 // 2. 打开且编辑 vite.config.js 
 import { createVuePlugin } from 'vite-plugin-vue2'
 ​
 export default {
   plugins: [createVuePlugin()],
 }

5.6 安装 vue2

由于 vue 仓库主分支默认 vue3.x，所以直接 npm install vue 安装的是最新的 vue3，所以安装 vue2.x 得使用版本号

 npm install vue@2.6.14 -save-dev

5.7 修改项目结构

1. 创建src文件夹

2. 将 main.js 移入src 文件夹中，并修改：

    // main.js
    import Vue from "vue";
    import App from "./../App.vue"
    ​
    new Vue({
       el: "#app",
       render: (h) => h(App)
    }).$mount();
   

3. 修改 index.html中对 main.js的引用路径：<script type="module" src="/src/main.js"></script>

4. 在src文件中创建App.vue，并修改：

    <template>
      <div>This is Vue2</div>
    </template>
   

5.8 启动项目

 npm install && npm run dev

创建 vue2 项目或者可以使用官方提供的 awesome-vite ，找到自己想使用的插件即可（如下图）

6 创建其它框架项目（react、preact、lit、svelte）

• 创建流程与创建 vue3 项目其实是一致的；
• 只需要在选择框架的步骤选中你想创建的框架即可

看到这里，可能会有童鞋疑惑，为什么 npm init vite@latest 跟我们熟悉的 CLI 创建 Vue 项目的命令不一样呢？

要想搞懂这个问题，我们下面就一起探讨下叭 ~

7 npm init vite@latest 到底做了什么？

7.1 npm init

npm init 相信大家都已经很熟悉了，其实我们通过查找文档 npm init 还可以接受一个参数： <initializer>；

7.2 npm init <initializer>

npm init <initializer> 可用于创建一个新的或已存在的 npm 包。

initializer 在这种情况下是一个名为 create-<initializer> 的 npm 包，这个包将由 npm-exec(也就是 npx) 来安装，然后执行 package.json 中 bin 属性对应的脚本，运行任何其他与初始化相关的操作。

7.3 官方的一些实例：

npm 命令	等同
npm init foo	npx create-foo
npm init @usr/foo	npx @usr/create-foo
npm init @usr	npx @usr/create

那么通过以上转换我们可得：

 npm init vite@latest  =>  npx create-vite

那么我们运行 npm init vite@latest 其实就是运行了 npx create-vite

7.4 查看 vite 源码

我们通过 npmjs.com 查找 create-vite 或在 Vite 源代码中的 packages 文件夹（如下图）中可以看到有 create-vite 包

7.5 查看在 create-vite 文件夹

我们查看在 create-vite 文件夹下的 package.json 中发现 bin 入口：

 {
   "name": "create-vite",
   "version": "2.7.2",
   ...
   "bin": {
     "create-vite": "index.js",
     "cva": "index.js"
   },
   ...
 }

最后

该系列会是一个持续更新系列，关于整个《Vite 从入门到精通》，我主要会从如下图几个方面讲解，请大家拭目以待吧！！！

靓仔靓女们，都看到这里了，要不点个赞再走呗 🌹🌹🌹