这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天
问题
在 ES 模块在浏览器中可用之前，开发人员没有以模块化方式编写 JavaScript 的本机机制。这就是为什么我们都熟悉"捆绑"的概念：使用工具将我们的源模块抓取，处理和连接成可以在浏览器中运行的文件。
随着时间的推移，我们已经看到了像webpack，这样的一些工具，它们极大地改善了前端开发人员的开发体验。
然而，随着我们构建越来越雄心勃勃的应用程序，我们正在处理的JavaScript数量也在急剧增加。大型项目包含数千个模块的情况并不少见。我们开始遇到基于JavaScript的工具的性能瓶颈：通常需要不合理的长时间等待（有时长达几分钟！）才能启动开发服务器，即使使用热模块替换（HMR），文件编辑也可能需要几秒钟才能反映在浏览器中。缓慢的反馈循环会极大地影响开发人员的工作效率和幸福感。
Vite旨在通过利用生态系统中的新进展来解决这些问题：浏览器中本机ES模块的可用性，以及用编译为本机语言编写的JavaScript工具的兴起。
Vite的引出
Vite 是 Vue 技术生态新推出的开发工具，针对 Vue 应用的无打包开发服务器，开发者无需借助 webpack 等打包工具，即可直接在浏览器中预览 Vue 项目。Vite 的原理与本技术周刊之前介绍过的 snowpack 有着异曲同工之处，Vite 本身也表示一部分灵感来自 snowpack 项目。
vite 主要由两部分组成：
一个开发服务器，它基于 原生 ES 模块 提供了 丰富的内建功能，如速度快到惊人的 模块热更新（HMR）。
一套构建指令，它使用 Rollup 打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。
浏览器支持
默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持
Vite的主要特性
- 极速的服务启动：使用原生 ESM 文件，无需打包!
- 轻量快速的热重载：无论应用程序大小如何，都始终极快的模块热重载（HMR）
- 丰富的功能：对TypeScript、JSX、CSS 等支持开箱即用。
- 优化的构建：可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
- 通用的插件：在开发和构建之间共享 Rollup-superset 插件接口。
- 完全类型化的API：灵活的 API 和完整 TypeScript 类型。
对比优势
1.与webpack的对比
和上一章本人提到的webpack相比，vite有什么优势呢，详细收集资料和查阅文档后，请看：
webpack会先打包，然后启动开发服务器，请求服务器时直接给予打包结果。
而vite是直接启动开发服务器，请求哪个模块再对该模块进行实时编译。
由于现代浏览器本身就支持ES Module，会自动向依赖的Module发出请求。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。
由于vite在启动的时候不需要打包，也就意味着不需要分析模块的依赖、不需要编译，因此启动速度非常快。当浏览器请求某个模块时，再根据需要对模块内容进行编译。这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。
2、Vite 和 Vue Cli 区别
Vite 是基于原生 ES6 Modules，在生产环境下打包使用的是 Rollup。vue-cli 基于 webpack 封装，生产环境和开发环境都是基于 Webpack 打包。所以两者在生产环境下都是基于源代码文件打包。但在开发环境中，两者有所不同。Vite 在开发环境下，基于原生 ES6 ，无需对代码进行打包，浏览器可以直接调用。所以 Vite 因为基于浏览器的原生功能，省掉了打包过程，在开发环境中体验极其愉快。
尤雨溪对 Vite 的总结
- 在开发过程中，Vite 是一个开发服务器，根据浏览器的要求编译源文件。无需捆绑，编译后真正做到按需使用。未修改的文件会返回304，所以浏览器根本就不会要求。这就是它启动快、保持快的原因。
- Vite 支持热模块替换，这和 "简单的重载页面 "有本质的区别，在DX方面是天壤之别。Vue组件和CSS HMR是开箱即用的支持，第三方框架可以利用HMR API。
- Vite支持一些webpack启发的功能，比如从js中导入'.css'文件（a la css-loader），基于fs的相对路径引用资产（a la file-loader m在构建过程中只需指定'-base'就能自动处理最终的公共部署路径）。
- Vite通过esbuild支持.(t|j)sx?文件，开箱即用，速度快得惊人，所以即使是TS转码，HMR也是字面上的即时性。
- Vite使用Rollup进行生产构建，内部配置与开发服务器功能一致。生产构建的输出是一个传统的静态资产目录，可以部署在任何地方（并且可以被polyfilled以支持旧的borwsers）。
- Vite的核心也是可扩展的（配置/插件格式待定）--你可以通过添加Koa中间件（用于开发）+Rollup aplugin（用于构建）来添加对自定义文件转换的支持。（以上来源于大神的推特）
