Vite是什么？有什么特点？Vite的常用技巧有哪些？

Vite

一、前言：构建工具

1. 为什么需要构建工具

开发时，我们会使用框架 (React、Vue) ，ES6 模块化语法，Less/Sass 等 CSS 预处理器等语法进行开发，这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS语法才能运行。所以我们需要打包工具帮我们做完这些事。除此之外，打包还能压缩代码、做兼容性处理、提升代码性能等。

2. 有哪些构建工具

• Vite，
• Webpack，静态模块打包工具
• Rollup， JavaScript 模块打包工具，使用ESM（ES Module）
• Parcel，零配置Web应用打包工具，利用多核处理器提升编译速度
• Snowpack，号称”快如闪电的构建工具“，使用ESM，内置JSX、TS等多种模块
• esbuild，极速JavaScript打包器（用Go编写），比Rollup快

二、谈一谈对Vite的理解

• Vite是什么？有什么作用？
• 有什么特点？
• 与其它打包工具相比有什么优势？

1. Vite是什么

Vite是一个开发服务器，不同于传统的基于打包器的启动方式，Vite 使用「预构建依赖」+ 「原生ESM提供源码」的方式来启动。
Vite将应用中的模块分为「依赖」（开发过程中不会发生变动）和「源码」（需要不断修改，一般是Vue项目中src目录下的文件），将「依赖」部分，使用 esbuild 预构建依赖（就是启动项目后就开始构建依赖，而不是等到加载站点时）。
「源码」部分，以 「原生ESM」的方式提供（实际上是把模块加载工作交给了浏览器来完成），不是所有源码都需要被同时加载（例如基于路由拆分的代码模块）

Vite是一个构建工具（打包器），在生产环境中，Vite使用 rollup 对项目进行生产构建。

2. 有什么特点

（1）极速的服务启动

Vite 比其它工具，如webpack等，具有更快的服务启动时间主要来源于2点：

1. 采用了 预构建依赖，Vite使用 esbuild打包工具，在项目启动后便自动透明地执行了依赖构建，这样在加载站点之前，依赖就已经完成构建了。「依赖」是指在开发过程中不需要发生变动的部分，如引入的node_modules
2. 使用原生ESM 提供「源码」（即开发编写的代码，如Vue组件、CSS等），这样Vite只需要在浏览器请求到某个模块的源码时按需转换并提供源码

（2）更快的热重载

Vite 比其它工具具有更快的HMR加载速度的原因是：

利用了HTTP缓存来加速了HMR（Hot Module Replace）的加载。「源码」模块使用协商缓存，「依赖」模块使用强缓存。

（3）开发环境的首屏加载时间变慢

Vite 首屏期间需要额外做其它工作。不过首屏性能差只发生在 dev server 启动以后第一次加载页面时发生。之后再 reload 页面时，首屏性能会好很多。原因是 dev server 会将之前已经完成转换的内容缓存起来

（4）开发环境懒加载变慢

动态加载的文件，需要做 resolve 、 load 、 transform 、 parse 操作，并且还有大量的 http 请求，导致懒加载性能也受到影响

3. 和webpack比较

	Vite	webpack
构建原理	基于浏览器原生 ES 模块解析的构建工具	静态模块打包器
打包速度	快	慢
配置难度	简单，根据不同的开发场景自动配置相应的环境变量和配置选项	复杂，需要通过各种插件和加载器来实现各种功能
插件/加载器	少	多
工作方式	按需加载 先启动开发服务器，再按需编译文件	全部加载 先打包再启动

三、使用技巧

• 开发环境解决跨域问题
• mock服务器