❤Vite的认识和使用

❤Vite的认识和使用

1、认识vite

vite是前端的构建工具，和webpack类似，是一个 web 开发构建工具，由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。

官网

cn.vitejs.dev/

旧方式

冷启动开发服务器时，基于打包器的方式启动必须优先抓取并构建你的整个应用，然后才能提供服务

vite提供的新方式

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

2、vite优点（快的原因 vite / wedpack 的打包原理）

webpack打包原理

vite打包原理

对比上面的图可以发现，我觉得Vite做的思想方面其实是

从以前的全部加载转化为现在只是加载所需要的部分

依赖方面：

极速的服务启动，使用原生 ESM 文件，无需打包

在开发时大多依赖不会变为纯 JavaScript，一些较大的依赖（例如有上百个模块的组件库）处理的代价很高，存在多种模块化格式（例如 ESM 或者 CommonJS）。

Vite 使用 esbuild 预构建依赖。

esbuild简介

esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。

源码 方面：

通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。不是所有的源码都需要同时被加载（例如基于路由拆分的代码模块）。 Vite 以 原生 ESM 方式提供源码。

这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理

ESM简介

在早期，JavaScript程序很小，用来你的 web 页面需要的地方提供一定交互，所以不需要多大的脚本。

随着JavaScript程序越来越复杂，需要一种将 JavaScript 程序拆分为可按需导入的单独模块的机制，著名的 CommonJS 和 AMD 诞生了。前者主要用于服务端，后者则是用于浏览器。 ES6的到来，JavaScript原生模块（ES Module）也正式在浏览器登场。

ES Module（简称ESM）,就是原生浏览器支持 import 和 export 等 ES6 特性它依赖于 import 和 export 命令，

开发的时候用到过 type="module" 这个类型,直接指定 type 的类型就可以在现代浏览器上使用 ESM 模块

vite劣势

生态不及webpack，加载器、插件不够丰富

打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包

项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法

3、 vite的打包过程

Vite在开发环境中使用即时编译，实现了快速的启动和热重载; 而在生产环境中使用Rollup进行打包,和优化，生成最终的静态资源文件，以便于部署到Web服务器上。

开发环境（Development）：

启动Vite开发服务器：运行npm run dev或类似的命令启动Vite开发服务器。

即时编译：当您访问应用程序的入口文件（如index.html或.vue文件）时，Vite会解析这些文件并根据其中的导入关系进行即时编译。每个模块都会被编译为单独的JavaScript文件，并通过WebSocket与浏览器保持连接。

热模块替换（HMR）：Vite支持热模块替换，可以实时查看和应用代码的更改，而无需刷新整个页面。

生产环境（Production）：

构建应用程序：运行npm run build或类似的命令，Vite会执行构建过程。

Rollup打包：Vite在生产环境中使用Rollup进行打包，Rollup是一个强大的JavaScript模块打包器，将应用程序中的所有模块打包成一个或多个bundle文件，以便在生产环境中使用。

代码压缩和优化：Rollup可以对代码进行压缩和优化，例如删除未使用的代码、合并模块等，以减少最终生成的代码的大小。

生成最终的静态资源：在打包完成后，Vite会生成最终的静态资源文件，包括JavaScript文件、CSS文件和其他静态文件，这些文件可以直接部署到Web服务器上。

4、Vite相比于Webpack优势

优化的构建，可选 "多页应用" 或 "库" 模式的预配置 Rollup 构建

1. 本地开发的构建速度快，由于Vite是基于ESM和esbuild的，所以在本地开发时整体的构建速度会比webpack更快

2. 使用简单，Vite内置了很多loader和配置，让开发者可以零配置跑起来一个项目，而webpack则是需要写很多复杂的配置

5、Vite的热更新原理

轻量快速的热重载，无论应用程序大小如何，都始终极快的模块热重载（HMR）

Vite 的热更新主要依赖于 ES Module 的动态导入特性、模块热替换机制、WebSocket通信以及开发服务器，Vite 能够实现，从而实现快速、实时地将代码变化推送到浏览器端,高效的热更新

在开发阶段，运行 vite 命令，会启动一个开发服务器，vite 在开发阶段是一个服务器. 依赖 esm： vite 在开发阶段使用 esm 作为开发时的模块系统。 esm 具有动态导入的能力，这使得在代码中引入模块时可以动态地加载新的模块，从而实现了热更新。

HMR 机制：vite 利用了 webpack等构件工具中常用的热模块替换机制，在代码发生变化时，只将修改的模块动态的注入到运行中的应用程序中，不需要刷新整个页面，从而实现热更新。

使用websocket进行通信：vite 使用了 websocket 在开发服务器和浏览器之间建立了一个持久的双向通信通过。通过这个通道，vite 能够实时的将代码推送给浏览器，使浏览器可以及时的获取到代码变化，并进行热更新。

开发服务器创建 websocket 并监听文件变化，并给客户端发送消息,客户端有一个 js 文件(/@vite/client)也创建 websocket ，用来接收开发服务器的消息，这个 js 文件，在项目启动阶段，会注入到入口文件 index.html 中，从而实现模块的热更新。

开发服务器：vite 提供了一个基于 koa 的开发服务器，这个服务器会监控系统中文件的变化，并在文件发生变化时触发重新构建和热更新。通过这个开发服务器，开发者可以在开发过程中实时地查看代码的变化效果。

6、 良好扩展

vite 对 TypeScript、JSX、CSS 等支持开箱即用

通用的插件，在开发和构建之间共享 Rollup-superset 插件接口

完全类型化的API，灵活的 API 和完整 TypeScript 类型

7、使用

创建项目

npm init vite-app <project-name>

运行项目:

$ cd .... 
npm install
npm run dev

项目打包

npm run build