web开发构建工具Vite

1.什么是vite

Vite 是 vue 的作者尤雨溪在开发 vue3.0 的时候开发的一个 web 开发构建工具。由于其原生 ES 模块导入方式，可以实现闪电般的冷服务器启动。 

2.Vite和Webpack的区别 

 Vite的优势：

1. vite 开发服务器启动速度比 webpack 快    webpack 会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。vite 在启动开发服务器时不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
2. 由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
3. vite 热更新比 webpack 快在 HMR 方面，当改动了一个模块后，vite仅需让浏览器重新请求该模块即可，不像webpack那样需要把该模块的相关依赖模块全部编译一次，效率更高。
4. vite 使用esbuild(Go 编写) 预构建依赖，比 webpack 的 nodejs，快 10-100 倍。

Vite的劣势： 

1. 生态不及webpack，加载器、插件不够丰富
2. 打包到生产环境时，vite使用传统的 rollup（也可以自己手动安装webpack来）进行打包
3. 项目的开发浏览器要支持 ES Module，而且不能识别 CommonJS 语法

 其他的区别：

1.打包原理的区别

                                                                 webpack打包原理​​​​ 

                                                                      Vite打包原理

2.项目入口文件的区别 
         项目根目录的 index.html 是 Vite 项目的入口文件，而 webpack 的入口文件是 webpack 配置 entry 中指定的 js 文件。

3.Esbuild 

Esbuild 是一款基于 Go 语言开发的 javascript 打包工具，最大的一个特征就是快。 

Esbuild 之所以能这么快，主要原因有两个:

  1. Go 语言开发，可以多线程打包，代码直接编译成机器码；

Webpack 一直被人诟病构建速度慢，主要原因是在打包构建过程中，存在大量的 resolve、load、transform、parse 操作(详见 为什么有人说 vite 快，有人却说 vite 慢？- 快速的冷启动 )，而这些操作通常是通过 javascript 代码来执行的。要知道，javascript 并不是什么高效的语言，在执行过程中要先编译后执行，还是单线程并且不能利用多核 cpu 优势，和 Go 语言相比，效率很低。

  2. 可充分利用多核 cpu 优势；

关键 API - transfrom & build

Esbuild 并不复杂，它对外提供了两个 API：transform 和 build，使用起来非常简单。

transfrom，转换的意思，将 ts、jsx、tsx 等格式的内容转化为 js。 transfrom 只负责文件内容转换，并不会生成一个新的文件。

build，构建的意思，根据指定的单个或者多个入口，分析依赖，并使用 loader 将不同格式的内容转化为 js 内容，生成一个或多个 bundle 文件。

四、关于 Vite 的一些其他知识 

• 在工程中不是所有的引用模块都是ES写法，可能是CommonJS 和 UMD 、AMD 等等，这个时候Vite 会进行预构建，将其转换为ESM模块，以支持Vite。
• 对于JSX、或者TS 等需要编译的文件，Vite是用esbuild来进行编译的。

五、Webpack 和 Rollup 区别 

经验法则：对于应用使用 webpack，对于类库使用 Rollup。

如果你需要代码拆分(Code Splitting)，或者你有很多静态资源需要处理，再或者你构建的项目需要引入很多CommonJS模块的依赖，那么 webpack 是个很不错的选择。

如果您的代码库是基于 ES2015 模块的，而且希望你写的代码能够被其他人直接使用，你需要的打包工具可能是 Rollup 。