Vite是什么
两大部分组成：
- Native-ES-modules-based server for development
开发环境原生ES模块构建。
- Rollup-based build for production
打包构建基于Rollup。
传统构建工具的问题
- 传统打包工具会在dev server显示页面前打包引入的所有依赖。
- 包括对每一个文件的import/export关系完整分析
- 排序，复写，串联所有模块。
2 应用越大，打包越慢。
3 代码拆分利于生产环境性能，但是对开发环境没帮助。
基于 JavaScript 的工具有性能瓶颈，启动开发服务器较慢，影响开发效率。
Vite的优化办法：
Vite在浏览器请求源代码时进行转换并按需提供源代码，只在当前实际使用时才会被处理。减少了页面画面加载出来前的打包时间。
但在请求较大模块的时候，页面的加载会变慢。而同时请求的模块过多的时候，也会造成浏览器请求堵塞。所以Vite还有以下优化：
依赖预构建。
- CommonJS 和 UMD 兼容性。
Vite 必须先将作为 CommonJS 或 UMD 发布的依赖项转换为 ESM，当转换 CommonJS 依赖时，Vite 会执行智能导入分析。
* 保证一个模块只请求一次预构建。 Vite 将有许多内部模块的 ESM 依赖关系转换为单个模块，以提高后续页面加载性能。- etag 与 304 Not Modified。
源代码模块的请求会根据 304 Not Modified 进行协商缓存，而依赖模块请求则会通过 Cache-Control: max-age=31536000,immutable 进行强缓存，因此一旦被缓存它们将不需要再次请求。
- 代码拆分
在原生ESM构建模式下，精确地使已编辑的模块与其最近的 HMR 边界之间的链失效，只更新修改的模块本身。这意味着代码拆分对开发环境和生产环境都起到性能优化的作用。
- 原生ESM不支持以下写法：
import { someMethod } from ‘my-dep’
Vite会检测这种裸模块导入，并进行预构建，转换为ESM模式。重写导入为合法
URL，以便浏览器正确导入。import {createApp } from 'vue'//转换为import { createApp } from '/@modules/vue'
原生ESM下的HMR
在 Vite 中，HMR 是在原生 ESM 上执行的。当编辑一个文件时，Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用程序的大小。
- 重写引入模块时记录模块引用关系。
- import.meta.hot标识修改的模块的HMR边界。
- 当一个模块发生改变，会追溯其引入者，并寻找HMR边界。
- HMR边界重新请求修改的模块，并进行更新。
- 如果引用链追溯到尽头，例如Vue应用中引入的index.js,main.js发生更改。应用还是会进行全部重载。