vite源码分析之dev

最近研究socket, 所以就顺便看了一下vite源码, vite的热更新就是根据socket实现的, 所以正好记录一下.

前端任何脚手架的入口,肯定是在package.json文件中,当我们输入script命令时, 会经历什么样的步骤呢? 接下来我们一起来探索一下~~~

入口-package.json

看下面就是一个普通前端vite脚手架启动的服务

当我们在终端输入npm run dev时, 会如何调用vite进行项目的启动呢???

当我们输入npm run dev时, 当然我们就相当于执行vite --mode dev

命令

然后就会区node-module文件夹中的.bin文件夹中找, 我们能够找到两个关于vite命令的文件

这两个不同的命令,表示在不同的操作系统,调用不同的命令执行

.cmd为后缀名是在window操作系统下执行的命令, 而没有后缀名的,则是在linux系统里面执行的

.cmd

    @IF EXIST "%~dp0\node.exe" ("%~dp0\node.exe"  "%~dp0..\vite\bin\vite.js" %*) ELSE (@SETLOCAL@SET PATHEXT=%PATHEXT:;.JS;=;%node  "%~dp0..\vite\bin\vite.js" %*)

.cmd文件是Windows系统下的批处理文件,用于执行命令行命令的集合。.cmd文件的主要特点是:1. 只能运行在Windows系统下。
2. 以文本格式保存,可以用记事本编辑。

扩展名为.cmd。
支持Windows命令行命令,如dir、copy、del等,也支持if语法、for循环等逻辑控制语句。
需要管理员权限才能执行某些命令。
在文件开头指定编码格式,如@echo off和chcp 65001等,否则会出现中文乱码。

.sh

这个看不到后缀名的是sh文件

以#!/bin/sh开头

        #!/bin/shbasedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')")case `uname` in*CYGWIN*) basedir=`cygpath -w "$basedir"`;;esacif [ -x "$basedir/node" ]; then"$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"ret=$?else node  "$basedir/../vite/bin/vite.js" "$@"ret=$?fiexit $ret

是Linux/Unix Shell脚本的标记,用于声明脚本的shell类型和执行路径。当系统遇到以#!/开头的脚本时,会提取脚本第一行的信息来确定执行该脚本的shell环境与路径。例如,以#!/bin/sh开头的脚本会使用/bin/sh路径下的shell来执行脚本。
常见的shell类型有:

/bin/sh:指向系统默认的shell,通常是bash。
/bin/bash:直接指定bash shell来执行脚本。
/usr/bin/perl:使用perl来执行脚本。
/usr/bin/python:使用python来执行脚本。

通过#!/bin/sh指定要使用系统默认shell(通常是bash)来执行该脚本。

vite源码目录

可以从上面的命令文件中,找到, 其实最后就是执行了/…/vite/bin/vite.js文件

这还是相对路径指定,就是指定在node-modules文件夹下的vite文件

展开之后就是这样

/bin/vite.js

vite.js其实最重要的一句就是start函数

function start() {require('../dist/node/cli')
}

inspector

这里可以讲一下inspector.Session

inspector.Session是Chrome DevTools中的API,用于与Chrome浏览器建立调试会话,以调试和分析页面。
使用inspector.Session API可以:

与目标页面建立调试连接,随时启动或停止调试。
收集页面的事件、网络请求、控制台输出等信息。
设置断点和黑箱断点,调试运行中的JavaScript代码。
执行运行时命令,如:清理缓存、重新加载页面等。
分析DOM、CSS、内存等,检查页面的布局、样式和性能问题。

不过可以看到这是node环境, 所以没有直接使用inspector对象, 而是用require引入

process.argv.splice(profileIndex, 1)const next = process.argv[profileIndex]if (next && !next.startsWith('-')) {process.argv.splice(profileIndex, 1)}const inspector = require('inspector')const session = (global.__vite_profile_session = new inspector.Session())session.connect()session.post('Profiler.enable', () => {session.post('Profiler.start', start)})

这部分是什么功能呢?

在启动项目时添加–profile,可以打开Chrome的"性能"面板,用于分析项目在运行时的CPU/内存使用情况,找出潜在的性能瓶颈。例如,在一个Vue项目中,可以这样启动:

npm run serve --profile

这会在Chrome中打开"性能"面板,并开始记录项目的性能数据。
在面板中,你可以看到项目在运行时:

CPU的使用占比。可以找出消耗CPU最多的文件/函数。
内存的增长曲线。查看内存泄露或非常耗内存的组件。
事件的触发情况。如鼠标点击、页面滚动等事件的频率。
帧率的变化。帧率过低会造成卡顿,需要优化。
页面加载与渲染的时间轴。分析页面加载流程与瓶颈。
网络请求的数量和耗时。
网络请求的数量和耗时。这些可以缩短加载时间以获得更快的体验。

/node/cli- vite命令

这个文件记录了vite有哪些命令

    const cli = cac('vite') // Command And Conquer 是一个用于构建 CLI 应用程序的 JavaScript 库。

比如执行了vite dev 或者vite serve, 就会去执行action里面的逻辑

执行了vite build, 就会执行下面的action逻辑

vite中就只有dev和build这两个命令最重要

接下来介绍一下各个命令

build: 打包

dev: 运行

preview: 预览生产环境构建结果

optimize: 用于对Vite项目进行生产环境构建与优化

version: 查看当前项目中使用的Vite版本

help: 查看Vite CLI提供的所有命令与选项的帮助信息

parse: 解析Vite项目中的import语句与别名,获得其最终解析结果

dev

action里面就是创建一个serve,然后开始监听

server中处理vite.config.ts配置, 处理httpsConfig, 处理ChokidarOptions

这里介绍一下Chokidar

chokidar是一个用于Node.js的文件系统监视器，可以监听文件和文件夹的变化，并执行相应的回调函数。它支持跨平台运行，并可以监视新增、修改、删除、移动等文件系统操作。chokidar还支持通过正则表达式或glob模式对指定的文件进行过滤，并且支持批量处理多个文件。由于其功能强大和易于使用，chokidar已经成为Node.js生态系统中最受欢迎的文件系统监视器之一。

后面就是这个监听文件是否变化, 然后执行HMR(hot modules replacement)更新的

当然,这个只能监听本地文件, 所以它监听的参数只能是相对或绝对路径, 不能监控远程文件的变化

启动一个httpServer, 这个服务是node端处理文件是否发生变化, 以及发生变化之后去处理

resolveHttpServer

创建一个http服务直接使用node自带的http模块建立

函数具体源代码如下:

    export async function resolveHttpServer({ proxy }: CommonServerOptions,app: Connect.Server,httpsOptions?: HttpsServerOptions,): Promise<HttpServer> {if (!httpsOptions) {const { createServer } = await import('node:http')return createServer(app)}// #484 fallback to http1 when proxy is needed.if (proxy) {const { createServer } = await import('node:https')return createServer(httpsOptions, app)} else {const { createSecureServer } = await import('node:http2')return createSecureServer({// Manually increase the session memory to prevent 502 ENHANCE_YOUR_CALM// errors on large numbers of requestsmaxSessionMemory: 1000,...httpsOptions,allowHTTP1: true,},// @ts-expect-error TODO: is this correct?app,) as unknown as HttpServer}}

启动一个http服务之后就是在node端建立websocket

server-createSocket

可以看到socekt经过封装之后, 返回了listen, on, off, send , close方法和clients属性

后面node端发送socket信息, 就是使用send方法

函数具体源代码如下:

export function createWebSocketServer(server: Server | null,config: ResolvedConfig,httpsOptions?: HttpsServerOptions,): WebSocketServer {let wss: WebSocketServerRawlet wsHttpServer: Server | undefined = undefinedconst hmr = isObject(config.server.hmr) && config.server.hmrconst hmrServer = hmr && hmr.serverconst hmrPort = hmr && hmr.port// TODO: the main server port may not have been chosen yet as it may use the next availableconst portsAreCompatible = !hmrPort || hmrPort === config.server.portconst wsServer = hmrServer || (portsAreCompatible && server)const customListeners = new Map<string, Set<WebSocketCustomListener<any>>>()const clientsMap = new WeakMap<WebSocketRaw, WebSocketClient>()const port = hmrPort || 24678const host = (hmr && hmr.host) || undefinedif (wsServer) {wss = new WebSocketServerRaw({ noServer: true })wsServer.on('upgrade', (req, socket, head) => {if (req.headers['sec-websocket-protocol'] === HMR_HEADER) {wss.handleUpgrade(req, socket as Socket, head, (ws) => {wss.emit('connection', ws, req)})}})} else {// http server request handler keeps the same with// https://github.com/websockets/ws/blob/45e17acea791d865df6b255a55182e9c42e5877a/lib/websocket-server.js#L88-L96const route = ((_, res) => {const statusCode = 426const body = STATUS_CODES[statusCode]if (!body)throw new Error(`No body text found for the ${statusCode} status code`)res.writeHead(statusCode, {'Content-Length': body.length,'Content-Type': 'text/plain',})res.end(body)}) as Parameters<typeof createHttpServer>[1]if (httpsOptions) {wsHttpServer = createHttpsServer(httpsOptions, route)} else {wsHttpServer = createHttpServer(route)}// vite dev server in middleware mode// need to call ws listen manuallywss = new WebSocketServerRaw({ server: wsHttpServer })}wss.on('connection', (socket) => {socket.on('message', (raw) => {if (!customListeners.size) returnlet parsed: anytry {parsed = JSON.parse(String(raw))} catch {}if (!parsed || parsed.type !== 'custom' || !parsed.event) returnconst listeners = customListeners.get(parsed.event)if (!listeners?.size) returnconst client = getSocketClient(socket)listeners.forEach((listener) => listener(parsed.data, client))})socket.on('error', (err) => {// config.logger.error(`${colors.red(`ws error:`)}\n${err.stack}`, {//   timestamp: true,//   error: err,// })console.error(`ws error:`)})socket.send(JSON.stringify({ type: 'connected' }))if (bufferedError) {socket.send(JSON.stringify(bufferedError))bufferedError = null}})wss.on('error', (e: Error & { code: string }) => {if (e.code === 'EADDRINUSE') {config.logger.error(colors.red(`WebSocket server error: Port is already in use`),{ error: e },)} else {config.logger.error(colors.red(`WebSocket server error:\n${e.stack || e.message}`),{ error: e },)}})// Provide a wrapper to the ws client so we can send messages in JSON format// To be consistent with server.ws.sendfunction getSocketClient(socket: WebSocketRaw) {if (!clientsMap.has(socket)) {clientsMap.set(socket, {send: (...args) => {let payload: HMRPayloadif (typeof args[0] === 'string') {payload = {type: 'custom',event: args[0],data: args[1],}} else {payload = args[0]}socket.send(JSON.stringify(payload))},socket,})}return clientsMap.get(socket)!}// On page reloads, if a file fails to compile and returns 500, the server// sends the error payload before the client connection is established.// If we have no open clients, buffer the error and send it to the next// connected client.let bufferedError: ErrorPayload | null = nullreturn {listen: () => {wsHttpServer?.listen(port, host)},on: ((event: string, fn: () => void) => {if (wsServerEvents.includes(event)) wss.on(event, fn)else {if (!customListeners.has(event)) {customListeners.set(event, new Set())}customListeners.get(event)!.add(fn)}}) as WebSocketServer['on'],off: ((event: string, fn: () => void) => {if (wsServerEvents.includes(event)) {wss.off(event, fn)} else {customListeners.get(event)?.delete(fn)}}) as WebSocketServer['off'],get clients() {return new Set(Array.from(wss.clients).map(getSocketClient))},send(...args: any[]) {let payload: HMRPayloadif (typeof args[0] === 'string') {payload = {type: 'custom',event: args[0],data: args[1],}} else {payload = args[0]}if (payload.type === 'error' && !wss.clients.size) {bufferedError = payloadreturn}const stringified = JSON.stringify(payload)wss.clients.forEach((client) => {// readyState 1 means the connection is openif (client.readyState === 1) {client.send(stringified)}})},close() {return new Promise((resolve, reject) => {wss.clients.forEach((client) => {client.terminate()})wss.close((err) => {if (err) {reject(err)} else {if (wsHttpServer) {wsHttpServer.close((err) => {if (err) {reject(err)} else {resolve()}})} else {resolve()}}})})},}}

moduleGraph: 将所有文件的保存在这里

然后就是使用chokidar监听文件的change, add, unlink

当监听到文件change, 就触发onHMRUpdate

接下来就到了处理热更新handleHMRUpdate

handleHMRUpdate

handleHMRUpdate方法中, 首先处理了如果是配置文件发生改变

如果是.env环境变量改变, 如果是依赖发生改变

就需要重启服务server.restart()

如果仅仅只有客户端, 没有node端, 也就是说不在开发环境, 是不需要热更新的

(仅限开发)客户端本身不能热更新。

这个时候socket只会发送消息,让客户端重新加载

接着处理html文件, html文件是不支持热更新的

所以如果是html文件发生改变, 也需要重新加载页面

如果以上情况都不是就进行更新模块updateModules

函数具体源代码如下:

    export async function handleHMRUpdate(file: string,server: ViteDevServer,configOnly: boolean,): Promise<void> {const { ws, config, moduleGraph } = serverconst shortFile = getShortName(file, config.root)const fileName = path.basename(file)const isConfig = file === config.configFileconst isConfigDependency = config.configFileDependencies.some((name) => file === name,)const isEnv =config.inlineConfig.envFile !== false &&(fileName === '.env' || fileName.startsWith('.env.'))if (isConfig || isConfigDependency || isEnv) {// auto restart serverdebugHmr?.(`[config change] ${colors.dim(shortFile)}`)config.logger.info(colors.green(`${path.relative(process.cwd(), file)} changed, restarting server...`,),{ clear: true, timestamp: true },)try {await server.restart()} catch (e) {config.logger.error(colors.red(e))}return}if (configOnly) {return}debugHmr?.(`[file change] ${colors.dim(shortFile)}`)// (dev only) the client itself cannot be hot updated.if (file.startsWith(normalizedClientDir)) {ws.send({type: 'full-reload',path: '*',})return}const mods = moduleGraph.getModulesByFile(file)// check if any plugin wants to perform custom HMR handlingconst timestamp = Date.now()const hmrContext: HmrContext = {file,timestamp,modules: mods ? [...mods] : [],read: () => readModifiedFile(file),server,}for (const hook of config.getSortedPluginHooks('handleHotUpdate')) {const filteredModules = await hook(hmrContext)if (filteredModules) {hmrContext.modules = filteredModules}}if (!hmrContext.modules.length) {// html file cannot be hot updatedif (file.endsWith('.html')) {config.logger.info(colors.green(`page reload `) + colors.dim(shortFile), {clear: true,timestamp: true,})ws.send({type: 'full-reload',path: config.server.middlewareMode? '*': '/' + normalizePath(path.relative(config.root, file)),})} else {// loaded but not in the module graph, probably not jsdebugHmr?.(`[no modules matched] ${colors.dim(shortFile)}`)}return}updateModules(shortFile, hmrContext.modules, timestamp, server)}

我简单画了一下流程图

updateModules

模块更新就需要上面讲到的moduleGraph

这里存储了所有的文件模块图

当有监听到有模块更新, moduleGraph就有发生改变

去除无效的模块, 找到需要更新的模块

最后当发出send类型为update类型, 就是一个文件发生变化啦

    export function updateModules(file: string,modules: ModuleNode[],timestamp: number,{ config, ws, moduleGraph }: ViteDevServer,afterInvalidation?: boolean,): void {const updates: Update[] = []const invalidatedModules = new Set<ModuleNode>()const traversedModules = new Set<ModuleNode>()let needFullReload = falsefor (const mod of modules) {moduleGraph.invalidateModule(mod, invalidatedModules, timestamp, true)if (needFullReload) {continue}const boundaries: { boundary: ModuleNode; acceptedVia: ModuleNode }[] = []const hasDeadEnd = propagateUpdate(mod, traversedModules, boundaries)if (hasDeadEnd) {needFullReload = truecontinue}updates.push(...boundaries.map(({ boundary, acceptedVia }) => ({type: `${boundary.type}-update` as const,timestamp,path: normalizeHmrUrl(boundary.url),explicitImportRequired:boundary.type === 'js'? isExplicitImportRequired(acceptedVia.url): undefined,acceptedPath: normalizeHmrUrl(acceptedVia.url),})),)}if (needFullReload) {config.logger.info(colors.green(`page reload `) + colors.dim(file), {clear: !afterInvalidation,timestamp: true,})ws.send({type: 'full-reload',})return}if (updates.length === 0) {debugHmr?.(colors.yellow(`no update happened `) + colors.dim(file))return}config.logger.info(colors.green(`hmr update `) +colors.dim([...new Set(updates.map((u) => u.path))].join(', ')),{ clear: !afterInvalidation, timestamp: true },)ws.send({type: 'update',updates,})}

就比如下图, 文件路径和名称就来自于moduleGraph

流程图附上

client-createSocket

讲完了node端如何发送socket

接下来肯定要有客户端监听到socket

查看目录时, 我们能够看到有一个client目录

这里其实就是客户端处理socket的文件

不知道有没有人好奇, 怎么把文件引入到客户端去, 没有看源码之前, 反正我是很好奇的

不知道大家有没有记得,在action里面有一个createServer

在createServer里面有一个_createServer

在_createServer里面有一个resolveConfig

在resolveConfig里面有resolvePlugins

在resolvePlugins里面有importAnalysisPlugin

就是在importAnalysisPlugin里面

通过字符串导入方式把createHotContext导入到了客户端

这里str是什么

这是来自一个外部的npm包

magic-string

假设您有一些源代码。您想要对其进行一些轻微的修改 - 在这里和那里替换一些字符，用页眉和页脚包装它等等 - 理想情况下您希望在它的末尾生成一个源映射。您考虑过使用 recast 之类的东西（它允许您从一些 JavaScript 生成 AST，对其进行操作，并使用 sourcemap 重新打印它而不会丢失您的注释和格式），但它似乎对您的需求（或者可能是源代码不是 JavaScript）。

能够在客户端代码里面注入,这样就将createHotContext注入到客户端中,并使用

在createHotContent中, 就存在setupWebSocket啦

在浏览器端建立socket核心代码如下:

function setupWebSocket(protocol: string,hostAndPath: string,onCloseWithoutOpen?: () => void,) {const socket = new WebSocket(`${protocol}://${hostAndPath}`, 'socket-hmr')let isOpened = falsesocket.addEventListener('open',() => {isOpened = true},{ once: true },)// Listen for messagessocket.addEventListener('message', async ({ data }) => {// handleMessage(JSON.parse(data))console.log(data)})// ping serversocket.addEventListener('close', async ({ wasClean }) => {if (wasClean) returnif (!isOpened && onCloseWithoutOpen) {onCloseWithoutOpen()return}console.log(`[socket] server connection lost. polling for restart...`)await waitForSuccessfulPing(protocol, hostAndPath)location.reload()})return socket}function warnFailedFetch(err: Error, path: string | string[]) {if (!err.message.match('fetch')) {console.error(err)}console.error(`[hmr] Failed to reload ${path}. ` +`This could be due to syntax errors or importing non-existent ` +`modules. (see errors above)`,)}async function waitForSuccessfulPing(socketProtocol: string,hostAndPath: string,ms = 1000,) {const pingHostProtocol = socketProtocol === 'wss' ? 'https' : 'http'const ping = async () => {// A fetch on a websocket URL will return a successful promise with status 400,// but will reject a networking error.// When running on middleware mode, it returns status 426, and an cors error happens if mode is not no-corstry {await fetch(`${pingHostProtocol}://${hostAndPath}`, {mode: 'no-cors',headers: {// Custom headers won't be included in a request with no-cors so (ab)use one of the// safelisted headers to identify the ping requestAccept: 'text/x-socket-ping',},})return true} catch {}return false}if (await ping()) {return}await wait(ms)// eslint-disable-next-line no-constant-conditionwhile (true) {if (document.visibilityState === 'visible') {if (await ping()) {break}await wait(ms)} else {await waitForWindowShow()}}}function waitForWindowShow() {return new Promise<void>((resolve) => {const onChange = async () => {if (document.visibilityState === 'visible') {resolve()document.removeEventListener('visibilitychange', onChange)}}document.addEventListener('visibilitychange', onChange)})}function wait(ms: number) {return new Promise((resolve) => setTimeout(resolve, ms))}

这样就建立了浏览器端与node端的通信啦

好了, 今天分享到这里就结束了, 源码分析解释还是篇幅太长, 所以我这里就只提到了dev命令.

vite的其他命令其实也是这样分析, 如果有什么疑问或者不好之处, 欢迎大家在评论区指出, 祝大家有个愉快的周末!