前端面试宝典---vite原理解析

开发过程

1. 启动开发服务器

2. 依赖预构建

如果：有metaData.json文件就说明之前以及预构建过了
否则：扫描第三方依赖并对其进行预构建，并把每个第三方库变成ESM格式以及打成一个包

下面是vite官网自己的描述
vite 执行时所做的“依赖预构建”。这个过程有两个目的:

1. CommonJS 和 UMD 兼容性： 在开发阶段中，Vite 的开发服务器将所有代码视为原生 ES 模块。因此，Vite 必须先将以 CommonJS 或 UMD 形式提供的依赖项转换为 ES 模块。
   在转换 CommonJS 依赖项时，Vite 会进行智能导入分析，这样即使模块的导出是动态分配的（例如 React），具名导入（named imports）也能正常工作：
2. 性能： 为了提高后续页面的加载性能，Vite 将那些具有许多内部模块的 ESM 依赖项转换为单个模块。有些包将它们的 ES 模块构建为许多单独的文件，彼此导入。例如，lodash-es 有超过 600 个内置模块！当我们执行 import { debounce } from ‘lodash-es’ 时，浏览器同时发出 600 多个 HTTP 请求！即使服务器能够轻松处理它们，但大量请求会导致浏览器端的网络拥塞，使页面加载变得明显缓慢。
   通过将 lodash-es 预构建成单个模块，现在我们只需要一个HTTP请求！

3. 请求资源拦截编译

原因：

1. 对于esm是不支持 import {createApp} from ‘vue’，它只认识绝对或者相对路径
2. 浏览器只认识js文件，而不认识vue文件

1. 对浏览器请求进行拦截
2. 判断是否有缓存，有的话直接返回，没有则执行步骤3
3. 处理文件路径为系统文件路径
4. 对不同文件进行解析成浏览器认识的js css格式
   

热更新

在构建例如App.vue文件时，会注入一段热更新代码如下：

import.meta.hot = __vite__createHotContext("/node_modules/reset.css/reset.css");
import {updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle} from "/@vite/client"
const __vite__id = "G:/FE_code/vue3/cesium-test/node_modules/reset.css/reset.css"
const __vite__css = "/* http://meyerweb.com/eric/tools/css/reset/ \n   v2.0 | 20110126\n   License: none (public domain)\n*/\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed, \nfigure, figcaption, footer, header, hgroup, \nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n\tmargin: 0;\n\tpadding: 0;\n\tborder: 0;\n\tfont-size: 100%;\n\tfont: inherit;\n\tvertical-align: baseline;\n}\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure, \nfooter, header, hgroup, menu, nav, section {\n\tdisplay: block;\n}\nbody {\n\tline-height: 1;\n}\nol, ul {\n\tlist-style: none;\n}\nblockquote, q {\n\tquotes: none;\n}\nblockquote:before, blockquote:after,\nq:before, q:after {\n\tcontent: '';\n\tcontent: none;\n}\ntable {\n\tborder-collapse: collapse;\n\tborder-spacing: 0;\n}"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune( () => __vite__removeStyle(__vite__id))

vite 支持热更新功能，在开发过程中只针对编辑了的文件进行更新，而不需要整个页面重新构建，内部的原理是使用了 websocket机制。