这篇文章不会深入去了解vite的使用细节。而是作为邂逅篇，告诉大家我们选择vite的理由，vite相比于其他构建工具的 更快 是怎么做到的等等。

选择vite的原因

  • 在实际开发中，我们编写的代码往往不能被浏览器直接识别。比如ES6、TypeScript、Vue文件等
  • 所以我们需要使用构建工具对代码进行转换、编译。在之前我们一起看了关于Webpack、Roolup、Gulp等构建工具
  • 但是目前这些构建工具，可能需要很长的时间才能开启服务器（甚至是几分钟），HRM也可能需要几秒才能在浏览器中反映
  • 所以我们可以选择vite。

认识vite

从vite的语义，快速的。我们就可以看出来快速是vite的最大特点。
它很好地解决了其他构建工具启动服务器慢、HRM响应慢的弊端。显著提高前端开发体验。

vite对于dev和build，采用是不同的方案

首先是开发模式下：
vite将项目中所以的代码分为两部分，一部分是第三方依赖，另一部分是我们编写的源代码

  • 我们可能会在项目中引入很多第三方依赖库，比如vue、loadsh等等。vite会使用esbuild预构建依赖。

  • 而对于源码，vite会对我们的源码文件（比如jsx、css、vue等）进行转换，转化后的代码文件是以原生ESM的方式提供给浏览器的。而且会根据情景动态导入代码，提供给浏览器。即只在当前屏幕上实际使用时才会被处理。

    （现在的浏览器是能 在 script 标签上支持原生 ESM和 原生 ESM 动态导入。传统浏览器可以通过官方插件 @vitejs/plugin-legacy支持。）

而在生产模式下：
vite提供了一套构建指令，它是基于rollup对我们的代码进行打包的。而且它是预配置的，无需配置就可以直接输出生产环境下优化过的静态资源。

  1. //package.json
  2. "scripts": {
  3.   "dev": "vite",
  4.   "build": "vite build",
  5.   "serve": "vite preview"
  6. },

vite处理源码原理

在上边提到了vite对于源码文件的处理。在这里更深入探讨下其更具体的实现原理：

  • vite会开启一个基于connect的本地服务器，在服务器上，将我们的源码文件（比如css、less、jsx、vue等等）转化成浏览器能够识别的文件。比如style.less转化为style.js、format.ts转化为format.js。
  • 在这个转化的过程中，有的文件vite是知道怎么进行转化的。比如ts文件等。但很多文件vite是不懂得怎么转化的，这就需要我们下载对应的插件，去告诉vite要怎么进行转化。
  • 接着vite会对源码文件进行一个转发（重定向），让我们浏览器拿到的代码是转化后的代码。
    （我们打开浏览器的network，可以看到浏览器请求的仍是源码文件，比如style.less，format.ts等文件。但是实际上浏览器拿到的是转化后的代码。）

现在vite使用的是connect来帮助我们开启服务器。而在vite@1版本，是使用的koa。
为什么vite要使用旧版本的connect，而不去实现现在流行的express或koa呢？
这是因为我们在服务器上主要做的事情是将浏览器的请求重定向到转化后的文件，而这方面的处理connect是更擅长的。

预构建依赖

  • 当我们对项目第一次开启服务时，vite就会对我们的第三方依赖的代码进行预构建。
  • vite会将预构建好的代码，放到node_modules/.vite目录下。
  • 所以下一次去重新构建项目，就直接来到node_modules/.vite目录下拿构建好的依赖代码就可以了。无需重新构建。

这也是vite开启服务器能这么快的原因之一。
image-20220614161901447.png
而且vite进行预构建是使用的esbuild这个构建工具的。esbuild的构建速度比其它构建工具要快10-100倍。

esbuild

esbuild的特点：

  • 超快的构建速度，甚至快到已经不需要缓存了
  • 支持ES6和CommonJs的模块化
  • 支持ES6的Tree Shaking
  • 支持go、js的api
  • 支持Ts、jsx语法编译
  • 支持SourceMap
    • 支持代码压缩
  • 支持扩展插件

esbuild的构建速度：
esbuild的构建速度比其他构建工具快10-100倍。
image-20220614163137294.png

esbuild怎么做到这么快？

  • 使用go语言进行编写，无需转化为字节码，可以直接转化为机器码；
  • esbuild会充分利用CPU的多内核，让CPU饱和运行。（会多开启一个进程，然后在进程里又开启多个线程，并行地去处理。让CPU饱和运行）
  • esbuild所有的内容都是从零编写的。没有使用第三方库，也就不会受第三方库的性能问题影响。（而且从一开始的设计上就处处考虑性能问题了）