蛮荒时代页面更新
很久以前，通过live reload即自动刷新页面的方式来解决代码更新，效果刷新。随着时代的发展，前端工程日益庞大，开发场景也越来越复杂，上述方式已经无法满足前端的需求，简单来说就是模块局部更新和状态保存的需求无法被满足，导致前端开发体验欠佳。
什么是热更新
HMR 全称即 Hot Module Replacement，即模块热更新或者模块热替换。相比较以往网页的live load方式，它具有以下优点：
- 可以实现局部更新，避免多余的资源请求，提高开发效率;
- 在更新的时候可以保存应用原有状态；
- 在代码修改和页面更新方面，实现所见即所得；
主要作用就是在页面模块更新的时候，直接把页面中发生变化的模块替换为新的模块，同时不影响其他模块的正常 运作。
webpack热更新
webpack中的HMR是依赖了webpack-dev-server中的插件HotModuleReplacementPlugin，是Webpack内置的一个Plugin。在平常开发中，之所以改一个文件，例如改动某个vue文件，就会触发HMR动作，是因为在vue-loader中内置使用了HotModuleReplacementPlugin的逻辑，如下图所示：
简单定义一个helloWorld.vue
<template>
<div>hello worldc/div>
</template>
main.js
import vue from 'vue
import Helloworld from'xxx'
if (module.hot) {
module.hot.accept('_c/Helloworld'，()=>{
// 拉取更新过的Helloworld.vue文件
})
}
new vue(
el:‘#app',
template: '<Helloworld/>",
component:{ Helloworld}
}）
在整个HMR的过程中，有两个关键点：
- 与本地服务器建立socket连接，注册hash和 ok两个事件，发生文件修改时，给客户端维送hash事件。 客户端根据hash事件中返回的参数来拉取更新后的文件。
- HotModuleReplacementPlugin会在文件修改后，生成两个文件，用于被客户端拉取使用。例如 hash.hot-update.json
{
"c":{
"chunkname": true
}
"h":"d69324ef62c3872485a2"
}
chunkname.d69324ef62c3872485a2.hot-update.js，这里的chunkname 即上面c中对于 key.
webpackHotupdate("main",(
"./src/test.js":
(function(module,_webpack_exports_,_webpack_require_){
"use strict";
eval(....)
})
})
除此之外，还有对源文件的注入，使其具备拉取最新代码。 参考网上的一张图，原文：blog.csdn.net/weixin_4433…
Vite HMR API
相比webpack等打包工具的HMR API，vite自己实现了一套HMR API，其基于ESM HMR规范来实现，官方宣称可以 达到毫秒级更新，性能非常强悍。 这个规范是由同时期的no-bundle构建工具Snowpack、WMR与Vite—起制定，是一个比较通用的规范。
interface Importmeta {
readonly hot?:{
readonly data:any;
accept():void;
accept(cb:(mod:any)=>void):void;
accept(dep:string,cb:(mod:any)=>void):void;accept(deps:string[],cb(mods:any[])=>void):void;prune(cb: ()->void):void;
dispose(cb:(data:any)=>void)=>void;
decline():void;
invalidate():void;
on(event:string,cb:(...args:any[])=>void)=>void
}
}
import.meta对象是现代浏览器原生内置对象，vite就是在这个对象上的hot属性中定义了一套完整的属性和方法， 因此，在vite当中就可以通过import.meta.hot来访问关于HMR的属性和方法，比如经常会见到的 import,meta.hot.accept()。
模块更新时逻辑：hot.accept
在import.meta.hot对象上有个accept的方法，决定了vite进行热更新的边界。用来接受模块热更新，一旦vite接受 了这个更新，当前模块就会被认为是HMR的边界，主要存在三种情况:
- 接受自身模块的更新
- 接受某个子模块的更新
- 接受多个子模块的更新
模块销毁逻辑：hot.dispose
表示在模块更新、旧模块需要销毁时做一些事情，比如清除定时器类似的事情。
共享数据：hot.data属性
用来在不同的模块实例间共享一些数据
hot.decline()
表示次模块不可热更新，当模块更新时，会强制进行页面刷新
hot.invalidate()
用来强制刷新页面
自定义事件
可通过import.meta.hot.on来监听HMR的自定义事件
Vite 热更新解析
两个关键点
- 初始化本地服务器
- 加载并执行对应的Plugin，例如 sourceMapPlugin)、moduleRewritePlugin、htmlRewritePlugin 等等。
目前官方提供了不少Plugin，大家感兴趣的可以去Vite插件查看。 其中第二点中Plugin主要会处理几件事 - 拦截请求，处理ES Module语法相关的代码，转化为浏览器可识别的ESModule语法，例如第三方模块的 import 转化为/@module/vue.js
- 对.ts、.vue进行即时的编译以及sass或less的预编译
- 建立模块间的依赖图，建立socket连接，用于实现HMR
创建模块依赖图
为了方便管理各个模块间的依赖关系，vite在dev server中创建了模块依赖图的数据结构-ModuleGraph类点击查看源码
主要分三个步骤：
- 初始化依赖图实例
- 创建依赖图节点
- 绑定各个模块节点的依赖关系
// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/index.ts
// 初始化实例
const moduleGraph: ModuleGraph = new ModuleGraph((url, ssr) =>
container.resolveId(url, undefined, { ssr }),
)
// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/moduleGraph.ts
// 用来记录模块信息
// 原始请求url到模块节点的映射，比如src/index.vue
urlToModuleMap = new Map<string, ModuleNode>()
// 模块id到模块节点的映射，其中id与原始请求url为经过resolved钩子解析后的结果
idToModuleMap = new Map<string, ModuleNode>()
// a single file may corresponds to multiple modules with different queries
// 文件到模块节点的映射
fileToModulesMap = new Map<string, Set<ModuleNode>>()
ModuleNode对象即代表模块节点中的具体信息
// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/moduleGraph.ts#L41
export class ModuleNode {
/**
* Public served url path, starts with /
*/
url: string
/**
* Resolved file system path + query
*/
id: string | null = null
file: string | null = null
type: 'js' | 'css'
info?: ModuleInfo
meta?: Record<string, any>
importers = new Set<ModuleNode>()
clientImportedModules = new Set<ModuleNode>()
ssrImportedModules = new Set<ModuleNode>()
acceptedHmrDeps = new Set<ModuleNode>()
acceptedHmrExports: Set<string> | null = null
importedBindings: Map<string, Set<string>> | null = null
isSelfAccepting?: boolean
transformResult: TransformResult | null = null
ssrTransformResult: TransformResult | null = null
ssrModule: Record<string, any> | null = null
ssrError: Error | null = null
lastHMRTimestamp = 0
lastInvalidationTimestamp = 0
/**
* @param setIsSelfAccepting - set `false` to set `isSelfAccepting` later. e.g. #7870
*/
constructor(url: string, setIsSelfAccepting = true) {
this.url = url
this.type = isDirectCSSRequest(url) ? 'css' : 'js'
if (setIsSelfAccepting) {
this.isSelfAccepting = false
}
}
get importedModules(): Set<ModuleNode> {
const importedModules = new Set(this.clientImportedModules)
for (const module of this.ssrImportedModules) {
importedModules.add(module)
}
return importedModules
}
}
重点可关注以下两个方法
// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/moduleGraph.ts#L41
getModuleById(id: string): ModuleNode | undefined {
return this.idToModuleMap.get(removeTimestampQuery(id))
}
/**
* Update the module graph based on a module's updated imports information
* If there are dependencies that no longer have any importers, they are
* returned as a Set.
*/
async updateModuleInfo(
mod: ModuleNode,
importedModules: Set<string | ModuleNode>,
importedBindings: Map<string, Set<string>> | null,
acceptedModules: Set<string | ModuleNode>,
acceptedExports: Set<string> | null,
isSelfAccepting: boolean,
ssr?: boolean,
): Promise<Set<ModuleNode> | undefined> {
....
}
服务端收集模块更新
vite会在服务启动时创建文件监听器
// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/cli.ts
// dev
cli
.command('[root]', 'start dev server') // default command
.alias('serve') // the command is called 'serve' in Vite's API
.alias('dev') // alias to align with the script name
.option('--host [host]', `[string] specify hostname`)
.option('--port <port>', `[number] specify port`)
.option('--https', `[boolean] use TLS + HTTP/2`)
.option('--open [path]', `[boolean | string] open browser on startup`)
.option('--cors', `[boolean] enable CORS`)
.option('--strictPort', `[boolean] exit if specified port is already in use`)
.option(
'--force',
`[boolean] force the optimizer to ignore the cache and re-bundle`,
)
.action(async (root: string, options: ServerOptions & GlobalCLIOptions) => {
filterDuplicateOptions(options)
// output structure is preserved even after bundling so require()
// is ok here
const { createServer } = await import('./server')
try {
const server = await createServer({
root,
base: options.base,
mode: options.mode,
configFile: options.config,
logLevel: options.logLevel,
clearScreen: options.clearScreen,
optimizeDeps: { force: options.force },
server: cleanOptions(options),
})
if (!server.httpServer) {
throw new Error('HTTP server not available')
}
await server.listen()
const info = server.config.logger.info
const viteStartTime = global.__vite_start_time ?? false
const startupDurationString = viteStartTime
? colors.dim(
`ready in ${colors.reset(
colors.bold(Math.ceil(performance.now() - viteStartTime)),
)} ms`,
)
: ''
info(
`\n ${colors.green(
`${colors.bold('VITE')} v${VERSION}`,
)} ${startupDurationString}\n`,
{ clear: !server.config.logger.hasWarned },
)
server.printUrls()
bindShortcuts(server, {
print: true,
customShortcuts: [
profileSession && {
key: 'p',
description: 'start/stop the profiler',
async action(server) {
if (profileSession) {
await stopProfiler(server.config.logger.info)
} else {
const inspector = await import('node:inspector').then(
(r) => r.default,
)
await new Promise<void>((res) => {
profileSession = new inspector.Session()
profileSession.connect()
profileSession.post('Profiler.enable', () => {
profileSession!.post('Profiler.start', () => {
server.config.logger.info('Profiler started')
res()
})
})
})
}
},
},
],
})
} catch (e) {
const logger = createLogger(options.logLevel)
logger.error(colors.red(`error when starting dev server:\n${e.stack}`), {
error: e,
})
stopProfiler(logger.info)
process.exit(1)
}
})
createServer
// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/index.ts
export async function _createServer(
inlineConfig: InlineConfig = {},
options: { ws: boolean },
): Promise<ViteDevServer> {
const config = await resolveConfig(inlineConfig, 'serve')
const { root, server: serverConfig } = config
const httpsOptions = await resolveHttpsConfig(config.server.https)
const { middlewareMode } = serverConfig
const resolvedWatchOptions = resolveChokidarOptions(config, {
disableGlobbing: true,
...serverConfig.watch,
})
const middlewares = connect() as Connect.Server
const httpServer = middlewareMode
? null
: await resolveHttpServer(serverConfig, middlewares, httpsOptions)
const ws = createWebSocketServer(httpServer, config, httpsOptions)
if (httpServer) {
setClientErrorHandler(httpServer, config.logger)
}
const watcher = chokidar.watch(
// config file dependencies and env file might be outside of root
[root, ...config.configFileDependencies, config.envDir],
resolvedWatchOptions,
) as FSWatcher
const moduleGraph: ModuleGraph = new ModuleGraph((url, ssr) =>
container.resolveId(url, undefined, { ssr }),
)
const container = await createPluginContainer(config, moduleGraph, watcher)
const closeHttpServer = createServerCloseFn(httpServer)
let exitProcess: () => void
const server: ViteDevServer = {
config,
middlewares,
httpServer,
watcher,
pluginContainer: container,
ws,
moduleGraph,
resolvedUrls: null, // will be set on listen
ssrTransform(
code: string,
inMap: SourceMap | null,
url: string,
originalCode = code,
) {
return ssrTransform(code, inMap, url, originalCode, server.config)
},
transformRequest(url, options) {
return transformRequest(url, server, options)
},
transformIndexHtml: null!, // to be immediately set
async ssrLoadModule(url, opts?: { fixStacktrace?: boolean }) {
if (isDepsOptimizerEnabled(config, true)) {
await initDevSsrDepsOptimizer(config, server)
}
if (config.legacy?.buildSsrCjsExternalHeuristics) {
await updateCjsSsrExternals(server)
}
return ssrLoadModule(
url,
server,
undefined,
undefined,
opts?.fixStacktrace,
)
},
ssrFixStacktrace(e) {
ssrFixStacktrace(e, moduleGraph)
},
ssrRewriteStacktrace(stack: string) {
return ssrRewriteStacktrace(stack, moduleGraph)
},
async reloadModule(module) {
if (serverConfig.hmr !== false && module.file) {
updateModules(module.file, [module], Date.now(), server)
}
},
async listen(port?: number, isRestart?: boolean) {
await startServer(server, port)
if (httpServer) {
server.resolvedUrls = await resolveServerUrls(
httpServer,
config.server,
config,
)
if (!isRestart && config.server.open) server.openBrowser()
}
return server
},
openBrowser() {
const options = server.config.server
const url =
server.resolvedUrls?.local[0] ?? server.resolvedUrls?.network[0]
if (url) {
const path =
typeof options.open === 'string'
? new URL(options.open, url).href
: url
_openBrowser(path, true, server.config.logger)
} else {
server.config.logger.warn('No URL available to open in browser')
}
},
async close() {
if (!middlewareMode) {
process.off('SIGTERM', exitProcess)
if (process.env.CI !== 'true') {
process.stdin.off('end', exitProcess)
}
}
await Promise.allSettled([
watcher.close(),
ws.close(),
container.close(),
getDepsOptimizer(server.config)?.close(),
getDepsOptimizer(server.config, true)?.close(),
closeHttpServer(),
])
// Await pending requests. We throw early in transformRequest
// and in hooks if the server is closing, so the import analysis
// plugin stops pre-transforming static imports and this block
// is resolved sooner.
while (server._pendingRequests.size > 0) {
await Promise.allSettled(
[...server._pendingRequests.values()].map(
(pending) => pending.request,
),
)
}
server.resolvedUrls = null
},
printUrls() {
if (server.resolvedUrls) {
printServerUrls(
server.resolvedUrls,
serverConfig.host,
config.logger.info,
)
} else if (middlewareMode) {
throw new Error('cannot print server URLs in middleware mode.')
} else {
throw new Error(
'cannot print server URLs before server.listen is called.',
)
}
},
async restart(forceOptimize?: boolean) {
if (!server._restartPromise) {
server._forceOptimizeOnRestart = !!forceOptimize
server._restartPromise = restartServer(server).finally(() => {
server._restartPromise = null
server._forceOptimizeOnRestart = false
})
}
return server._restartPromise
},
_ssrExternals: null,
_restartPromise: null,
_importGlobMap: new Map(),
_forceOptimizeOnRestart: false,
_pendingRequests: new Map(),
_fsDenyGlob: picomatch(config.server.fs.deny, { matchBase: true }),
_shortcutsOptions: undefined,
}
server.transformIndexHtml = createDevHtmlTransformFn(server)
if (!middlewareMode) {
exitProcess = async () => {
try {
await server.close()
} finally {
process.exit()
}
}
process.once('SIGTERM', exitProcess)
if (process.env.CI !== 'true') {
process.stdin.on('end', exitProcess)
}
}
const onHMRUpdate = async (file: string, configOnly: boolean) => {
if (serverConfig.hmr !== false) {
try {
await handleHMRUpdate(file, server, configOnly)
} catch (err) {
ws.send({
type: 'error',
err: prepareError(err),
})
}
}
}
const onFileAddUnlink = async (file: string) => {
file = normalizePath(file)
await handleFileAddUnlink(file, server)
await onHMRUpdate(file, true)
}
watcher.on('change', async (file) => {
file = normalizePath(file)
// invalidate module graph cache on file change
moduleGraph.onFileChange(file)
await onHMRUpdate(file, false)
})
watcher.on('add', onFileAddUnlink)
watcher.on('unlink', onFileAddUnlink)
ws.on('vite:invalidate', async ({ path, message }: InvalidatePayload) => {
const mod = moduleGraph.urlToModuleMap.get(path)
if (mod && mod.isSelfAccepting && mod.lastHMRTimestamp > 0) {
config.logger.info(
colors.yellow(`hmr invalidate `) +
colors.dim(path) +
(message ? ` ${message}` : ''),
{ timestamp: true },
)
const file = getShortName(mod.file!, config.root)
updateModules(
file,
[...mod.importers],
mod.lastHMRTimestamp,
server,
true,
)
}
})
if (!middlewareMode && httpServer) {
httpServer.once('listening', () => {
// update actual port since this may be different from initial value
serverConfig.port = (httpServer.address() as net.AddressInfo).port
})
}
// apply server configuration hooks from plugins
const postHooks: ((() => void) | void)[] = []
for (const hook of config.getSortedPluginHooks('configureServer')) {
postHooks.push(await hook(server))
}
// Internal middlewares ------------------------------------------------------
// request timer
if (process.env.DEBUG) {
middlewares.use(timeMiddleware(root))
}
// cors (enabled by default)
const { cors } = serverConfig
if (cors !== false) {
middlewares.use(corsMiddleware(typeof cors === 'boolean' ? {} : cors))
}
// proxy
const { proxy } = serverConfig
if (proxy) {
middlewares.use(proxyMiddleware(httpServer, proxy, config))
}
// base
if (config.base !== '/') {
middlewares.use(baseMiddleware(server))
}
// open in editor support
middlewares.use('/__open-in-editor', launchEditorMiddleware())
// ping request handler
// Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
middlewares.use(function viteHMRPingMiddleware(req, res, next) {
if (req.headers['accept'] === 'text/x-vite-ping') {
res.writeHead(204).end()
} else {
next()
}
})
// serve static files under /public
// this applies before the transform middleware so that these files are served
// as-is without transforms.
if (config.publicDir) {
middlewares.use(
servePublicMiddleware(config.publicDir, config.server.headers),
)
}
// main transform middleware
middlewares.use(transformMiddleware(server))
// serve static files
middlewares.use(serveRawFsMiddleware(server))
middlewares.use(serveStaticMiddleware(root, server))
// html fallback
if (config.appType === 'spa' || config.appType === 'mpa') {
middlewares.use(htmlFallbackMiddleware(root, config.appType === 'spa'))
}
// run post config hooks
// This is applied before the html middleware so that user middleware can
// serve custom content instead of index.html.
postHooks.forEach((fn) => fn && fn())
if (config.appType === 'spa' || config.appType === 'mpa') {
// transform index.html
middlewares.use(indexHtmlMiddleware(server))
// handle 404s
// Keep the named function. The name is visible in debug logs via `DEBUG=connect:dispatcher ...`
middlewares.use(function vite404Middleware(_, res) {
res.statusCode = 404
res.end()
})
}
// error handler
middlewares.use(errorMiddleware(server, middlewareMode))
// httpServer.listen can be called multiple times
// when port when using next port number
// this code is to avoid calling buildStart multiple times
let initingServer: Promise<void> | undefined
let serverInited = false
const initServer = async () => {
if (serverInited) return
if (initingServer) return initingServer
initingServer = (async function () {
await container.buildStart({})
// start deps optimizer after all container plugins are ready
if (isDepsOptimizerEnabled(config, false)) {
await initDepsOptimizer(config, server)
}
initingServer = undefined
serverInited = true
})()
return initingServer
}
if (!middlewareMode && httpServer) {
// overwrite listen to init optimizer before server start
const listen = httpServer.listen.bind(httpServer)
httpServer.listen = (async (port: number, ...args: any[]) => {
try {
// ensure ws server started
ws.listen()
await initServer()
} catch (e) {
httpServer.emit('error', e)
return
}
return listen(port, ...args)
}) as any
} else {
if (options.ws) {
ws.listen()
}
await initServer()
}
return server
}
文件变化，调用handleHMRUpdate
// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/hmr.ts
export async function handleHMRUpdate(
file: string,
server: ViteDevServer,
configOnly: boolean,
): Promise<void> {
const { ws, config, moduleGraph } = server
const shortFile = getShortName(file, config.root)
const fileName = path.basename(file)
const isConfig = file === config.configFile
const isConfigDependency = config.configFileDependencies.some(
(name) => file === name,
)
const isEnv =
config.inlineConfig.envFile !== false &&
(fileName === '.env' || fileName.startsWith('.env.'))
// 配置文件、环境变量声明温家安变化，直接重启服务
if (isConfig || isConfigDependency || isEnv) {
// auto restart server
debugHmr?.(`[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 handling
const timestamp = Date.now()
const hmrContext: HmrContext = {
file,
timestamp,
modules: mods ? [...mods] : [],
read: () => readModifiedFile(file),
server,
}
// 顺序执行插件的 handleHotUpdate 钩子，拿到处理后HMR模块
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 updated
// 给客户端发送full-reload信息，刷新页面
if (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 js
debugHmr?.(`[no modules matched] ${colors.dim(shortFile)}`)
}
return
}
// 核心处理逻辑
updateModules(shortFile, hmrContext.modules, timestamp, server)
}
从以上代码可以看出，vite对于不同类型的文件，热更新策略存在一定差异
- 对于配置文件和环境变量声明文件的变动，vite会直接重启服务器
- 对于客户端注入的文件，vite会给客户端发送full-reload的信号，让客户端刷新页面
- 对于普通文件的改动，vite首先获取需要热更新的模块，然后对模块遍历查找热更新边界，然后将模块更新的信 息传给客户端
如何查找热更新边界逻辑呢？主要是在updateModules方法中
// https://github.com/vitejs/vite/blob/main/packages/vite/src/node/server/hmr.ts
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 = false
// 遍历需要更新的模块
for (const mod of modules) {
// 初始化热更新边界集合
const boundaries: { boundary: ModuleNode; acceptedVia: ModuleNode }[] = []
// 通过propagateUpdate 收集热更新边界，返回值为true表示需要刷新页面，为false局部热更新
const hasDeadEnd = propagateUpdate(mod, traversedModules, boundaries)
moduleGraph.invalidateModule(
mod,
invalidatedModules,
timestamp,
true,
boundaries.map((b) => b.boundary),
)
if (needFullReload) {
continue
}
if (hasDeadEnd) {
needFullReload = true
continue
}
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,
})
}
function propagateUpdate(
node: ModuleNode,
traversedModules: Set<ModuleNode>,
boundaries: { boundary: ModuleNode; acceptedVia: ModuleNode }[],
currentChain: ModuleNode[] = [node],
): boolean /* hasDeadEnd */ {
if (traversedModules.has(node)) {
return false
}
traversedModules.add(node)
// #7561
// if the imports of `node` have not been analyzed, then `node` has not
// been loaded in the browser and we should stop propagation.
if (node.id && node.isSelfAccepting === undefined) {
debugHmr?.(
`[propagate update] stop propagation because not analyzed: ${colors.dim(
node.id,
)}`,
)
return false
}
// 接受自身模块更新
if (node.isSelfAccepting) {
boundaries.push({ boundary: node, acceptedVia: node })
// additionally check for CSS importers, since a PostCSS plugin like
// Tailwind JIT may register any file as a dependency to a CSS file.
for (const importer of node.importers) {
if (isCSSRequest(importer.url) && !currentChain.includes(importer)) {
propagateUpdate(
importer,
traversedModules,
boundaries,
currentChain.concat(importer),
)
}
}
return false
}
// A partially accepted module with no importers is considered self accepting,
// because the deal is "there are parts of myself I can't self accept if they
// are used outside of me".
// Also, the imported module (this one) must be updated before the importers,
// so that they do get the fresh imported module when/if they are reloaded.
if (node.acceptedHmrExports) {
boundaries.push({ boundary: node, acceptedVia: node })
} else {
if (!node.importers.size) {
return true
}
// #3716, #3913
// For a non-CSS file, if all of its importers are CSS files (registered via
// PostCSS plugins) it should be considered a dead end and force full reload.
if (
!isCSSRequest(node.url) &&
[...node.importers].every((i) => isCSSRequest(i.url))
) {
return true
}
}
// 如果某个引用方模块接受了当前模块的更新，那么将这个引用方模块作为热更新的边界
for (const importer of node.importers) {
const subChain = currentChain.concat(importer)
if (importer.acceptedHmrDeps.has(node)) {
boundaries.push({ boundary: importer, acceptedVia: node })
continue
}
if (node.id && node.acceptedHmrExports && importer.importedBindings) {
const importedBindingsFromNode = importer.importedBindings.get(node.id)
if (
importedBindingsFromNode &&
areAllImportsAccepted(importedBindingsFromNode, node.acceptedHmrExports)
) {
continue
}
}
if (currentChain.includes(importer)) {
// circular deps is considered dead end
return true
}
if (propagateUpdate(importer, traversedModules, boundaries, subChain)) {
return true
}
}
return false
}
热更新边界收集完成后，server端会将相关信息推送给client端，完成局部模块更新
客户端更新流程
vite项目启动时可通过浏览器查看source，在里面注入了client.ts，关键点如下：
<script type="module" src="/@vite/client"></script>
之后客户端创建websocket客户端，然后与dev server中的websocket服务端建立双向连接。之后就监听socket实例的message事件，接收到服务端传来的更新信息
完整的handleMessage 代码如下
// https://github.com/vitejs/vite/blob/main/packages/vite/src/client/client.ts
async function handleMessage(payload: HMRPayload) {
switch (payload.type) {
case 'connected':
console.debug(`[vite] connected.`)
sendMessageBuffer()
// proxy(nginx, docker) hmr ws maybe caused timeout,
// so send ping package let ws keep alive.
setInterval(() => {
if (socket.readyState === socket.OPEN) {
socket.send('{"type":"ping"}')
}
}, __HMR_TIMEOUT__)
break
case 'update':
notifyListeners('vite:beforeUpdate', payload)
// if this is the first update and there's already an error overlay, it
// means the page opened with existing server compile error and the whole
// module script failed to load (since one of the nested imports is 500).
// in this case a normal update won't work and a full reload is needed.
if (isFirstUpdate && hasErrorOverlay()) {
window.location.reload()
return
} else {
clearErrorOverlay()
isFirstUpdate = false
}
await Promise.all(
payload.updates.map(async (update): Promise<void> => {
if (update.type === 'js-update') {
return queueUpdate(fetchUpdate(update))
}
// css-update
// this is only sent when a css file referenced with <link> is updated
const { path, timestamp } = update
const searchUrl = cleanUrl(path)
// can't use querySelector with `[href*=]` here since the link may be
// using relative paths so we need to use link.href to grab the full
// URL for the include check.
const el = Array.from(
document.querySelectorAll<HTMLLinkElement>('link'),
).find(
(e) =>
!outdatedLinkTags.has(e) && cleanUrl(e.href).includes(searchUrl),
)
if (!el) {
return
}
const newPath = `${base}${searchUrl.slice(1)}${
searchUrl.includes('?') ? '&' : '?'
}t=${timestamp}`
// rather than swapping the href on the existing tag, we will
// create a new link tag. Once the new stylesheet has loaded we
// will remove the existing link tag. This removes a Flash Of
// Unstyled Content that can occur when swapping out the tag href
// directly, as the new stylesheet has not yet been loaded.
return new Promise((resolve) => {
const newLinkTag = el.cloneNode() as HTMLLinkElement
newLinkTag.href = new URL(newPath, el.href).href
const removeOldEl = () => {
el.remove()
console.debug(`[vite] css hot updated: ${searchUrl}`)
resolve()
}
newLinkTag.addEventListener('load', removeOldEl)
newLinkTag.addEventListener('error', removeOldEl)
outdatedLinkTags.add(el)
el.after(newLinkTag)
})
}),
)
notifyListeners('vite:afterUpdate', payload)
break
case 'custom': {
notifyListeners(payload.event, payload.data)
break
}
case 'full-reload':
notifyListeners('vite:beforeFullReload', payload)
if (payload.path && payload.path.endsWith('.html')) {
// if html file is edited, only reload the page if the browser is
// currently on that page.
const pagePath = decodeURI(location.pathname)
const payloadPath = base + payload.path.slice(1)
if (
pagePath === payloadPath ||
payload.path === '/index.html' ||
(pagePath.endsWith('/') && pagePath + 'index.html' === payloadPath)
) {
pageReload()
}
return
} else {
pageReload()
}
break
case 'prune':
notifyListeners('vite:beforePrune', payload)
// After an HMR update, some modules are no longer imported on the page
// but they may have left behind side effects that need to be cleaned up
// (.e.g style injections)
// TODO Trigger their dispose callbacks.
payload.paths.forEach((path) => {
const fn = pruneMap.get(path)
if (fn) {
fn(dataMap.get(path))
}
})
break
case 'error': {
notifyListeners('vite:error', payload)
const err = payload.err
if (enableOverlay) {
createErrorOverlay(err)
} else {
console.error(
`[vite] Internal Server Error\n${err.message}\n${err.stack}`,
)
}
break
}
default: {
const check: never = payload
return check
}
}
}
批量处理任务，任务调度
// https://github.com/vitejs/vite/blob/main/packages/vite/src/client/client.ts
/**
* buffer multiple hot updates triggered by the same src change
* so that they are invoked in the same order they were sent.
* (otherwise the order may be inconsistent because of the http request round trip)
*/
async function queueUpdate(p: Promise<(() => void) | undefined>) {
queued.push(p)
if (!pending) {
pending = true
await Promise.resolve()
pending = false
const loading = [...queued]
queued = []
;(await Promise.all(loading)).forEach((fn) => fn && fn())
}
}
// 派发更新
async function fetchUpdate({
path,
acceptedPath,
timestamp,
explicitImportRequired,
}: Update) {
const mod = hotModulesMap.get(path)
if (!mod) {
// In a code-splitting project,
// it is common that the hot-updating module is not loaded yet.
// https://github.com/vitejs/vite/issues/721
return
}
let fetchedModule: ModuleNamespace | undefined
const isSelfUpdate = path === acceptedPath
// determine the qualified callbacks before we re-import the modules
const qualifiedCallbacks = mod.callbacks.filter(({ deps }) =>
deps.includes(acceptedPath),
)
if (isSelfUpdate || qualifiedCallbacks.length > 0) {
const disposer = disposeMap.get(acceptedPath)
if (disposer) await disposer(dataMap.get(acceptedPath))
const [acceptedPathWithoutQuery, query] = acceptedPath.split(`?`)
try {
fetchedModule = await import(
/* @vite-ignore */
base +
acceptedPathWithoutQuery.slice(1) +
`?${explicitImportRequired ? 'import&' : ''}t=${timestamp}${
query ? `&${query}` : ''
}`
)
} catch (e) {
warnFailedFetch(e, acceptedPath)
}
}
return () => {
for (const { deps, fn } of qualifiedCallbacks) {
fn(deps.map((dep) => (dep === acceptedPath ? fetchedModule : undefined)))
}
const loggedPath = isSelfUpdate ? path : `${acceptedPath} via ${path}`
console.debug(`[vite] hot updated: ${loggedPath}`)
}
}
总结
vite为了方便管理各模块之间的依赖关系，创建了模块依赖图。之后在HMR过程中，依据依赖图寻找HMR边界模块。HMR总体来说是由客户端和服务端配合完成，通过websocket进行数据传输。在服务端，vite通过查找依赖图确定更新边界，并将局部更新的信息传给客户端，客户端在接收到信息后，通过动态import请求加载最新模块内容。执行回调，即import.meta.hot.accept中定义的回调函数，完成整个热更新过程