Vite的学习之旅（一）

vite官网：Vite

为什么使用Vite?

Vite可以解决大型应用中构建工具需要很长时间才能启动开发服务器（让项目跑起来）的问题，提高项目启动效率。

Vite与Webpack的区别

启动服务器过程不同

Webpack启动服务器是是先遍历依赖，然后打包，最后启动服务器，其过程如图所示：

它是先通过入口文件（entry）遍历所需的依赖然后将其打包成Bundle.js文件，之后才启动服务器。
这样做就会带来一个问题：当我们开始构建越来越大型的应用时，需要处理的 JavaScript 代码量也呈指数级增长。包含数千个模块的大型项目相当普遍，基于这种方式打包的话需要遍历所有依赖，耗时会很久，也就导致启动会非常慢。

但Vite则避免了这个问题，它先启动服务器，然后按需加载相关的依赖，如下图所示：

Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。

• 依赖：大多为在开发时不会变动的纯 JavaScript。
• 源码：通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。

Vite是直接启动服务器，然后在浏览器请求源码时进行转换并按需提供源码，就是根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。不会遍历所有的依赖文件，节省了时间。

Vite脚手架与Vite的区别

Vite脚手架(create-vite)和Vite对于初学者而言很容易把它们弄混，它们虽然是同一个团队开发的，但却是不同的东西。
Vite脚手架与Vite的关系就和Vue-cli和webpack的关系一样。Vite脚手架是自动帮助我们构建项目的工具，而Vite是构建工具。
我们可以通过Webpack，Vite等构建工具从零开始构建一个项目，但在实际的开发过程中是不现实的，这样操作太繁琐了。于是开发团队对构建工具进行二次封装产生了对应的脚手架(create-vite,Vue-cli)，通过这些脚手架可以自动帮助我们构建一个完整的项目，而不需要我们通过构建工具一步步构建项目。
比如通过Vue-cli构建的Vue项目里面自动配置了webpack。
总结一下：Vite脚手架是对Vite构建工具的二次封装，帮助我们自动构建项目。

实践 Vite

初始化一个项目

yarn init

会在项目中生成package.json和 yarn.lock等配置文件

安装Vite

使用yarn add vite -D 安装Vite

//yarn 安装
yarn add vite -D
//npm 安装
npm install vite -D

可以看到，安装好Vite后，node_modules多了很多其他的依赖，如esbuild、rollup等等。

启动项目

在package.json中加入启动配置，然后通过vite dev命令，启动项目。

依赖预构建

Vite 的开发服务器将所有代码视为原生 ES 模块，因此我们要对 ES 模块导入依赖有一些基本的了解。

ES 模块导入资源方式

ES 模块在导入资源的时候，默认使用的是绝对路径或相对路径。
比如在main.js文件中引入count.js必须要通过路径引入，如图：

直接在浏览器打开index.html文件可以看到，对于 import 方式导入的资源，浏览器是通过http请求获取到的。每使用import导入一个文件，就对应一个http请求。

现在前台的主流方式引用依赖的方式就是将其放到node_modules文件夹下，ES 模块导入资源的话，必须通过路径引用，比如在count.js里面引入lodash的array方法。


直接引入 lodash-es是会报错的，es 模块是不支持这种方式的。


但Vite是支持这种方式引入依赖的，Vite会解析此种方式引入依赖方式，并进行路径的替换，这个替换操作是在依赖预构建中完成的。

什么是依赖预构建？

依赖预构建是指：Vite会找到对应的依赖，然后调用esbuild(安装Vite时会安装这些依赖，其主要对js语法进行处理)库，将其他规范的代码转换成esmodule规范，然后放到当前目录下的node_modules/.vite/deps，同时对esmodules规范的各个模块进行统一集成。
如下图，Vite对lodash和lodash依赖做了路径转换，并将其文件集成到lodash.js和lodash-es.js中，之后我们想再引入其依赖的话，会直接从这里获取，而不是从node_modules/lodash 等依赖包中获取，这样极大节省了查找的时间。

由于Vite的开发服务器将所有代码视为原生ES模块，所以Vite在做路径转换之前，会先将CommonJS 或 UMD 形式提供的依赖项转换为 ES 模块。因为不同的依赖包使用的导出格式是不同的。
比如：lodash依赖包使用的是CommonJs格式，

lodash-es依赖包使用的是ES模式

Vite会将其统一转化为ES模块。

使用依赖预构建有什么好处？

1，它重写了路径并统一放到.vite/deps目录下，提高了查找的效率。
2，它提升了效率，解决了网络多包传输的性能问题。
之前说道过，使用import 导入文件时，每导入一个文件就对应一个http请求。通过路径引入lodash文件依赖时，会扫描其引入的文件，并通过http引入。



结果会在浏览器导致大量的http请求，如下图：

大量请求会导致浏览器端的网络拥塞，使页面加载变得明显缓慢。这就是网络多包传输问题。
Vite则避免了这一点，它在依赖预构建中对这些依赖项做了集成处理，将那些具有许多内部模块的 ESM 依赖项转换为单个模块。预构建成单个模块后，浏览器只需要一个HTTP请求就可以获取那些依赖。

GitHub项目地址：seapack-hub/studyVite (github.com)