feat(bundled-dev): add lazy bundling support (#21406)

Author: sapphi-red

packages/vite/src/client/client.ts

@@ -644,6 +644,15 @@ if (isBundleMode && typeof DevRuntime !== 'undefined') {
     }
   }
 
+  const clientId = nanoid()
+
+  // notify client id
+  transport.send({
+    type: 'custom',
+    event: 'vite:module-loaded',
+    data: { modules: [], clientId },
+  })
+
   const wrappedSocket: Messenger = {
     send(message) {
       switch (message.type) {
@@ -652,7 +661,7 @@ if (isBundleMode && typeof DevRuntime !== 'undefined') {
             type: 'custom',
             event: 'vite:module-loaded',
             // clone array as the runtime reuses the array instance
-            data: { modules: message.modules.slice() },
+            data: { modules: message.modules.slice(), clientId },
           })
           break
         }
@@ -661,7 +670,6 @@ if (isBundleMode && typeof DevRuntime !== 'undefined') {
       }
     },
   }
-  const clientId = nanoid()
   ;(globalThis as any).__rolldown_runtime__ ??= new ViteDevRuntime(
     wrappedSocket,
     clientId,

packages/vite/src/node/server/environments/fullBundleEnvironment.ts

@@ -1,4 +1,3 @@
-import { randomUUID } from 'node:crypto'
 import { setTimeout } from 'node:timers/promises'
 import {
   type BindingClientHmrUpdate,
@@ -61,6 +60,7 @@ export class MemoryFiles {
 
 export class FullBundleDevEnvironment extends DevEnvironment {
   private devEngine!: DevEngine
+  private initialBuildCompleted = false
   private clients = new Clients()
   private invalidateCalledModules = new Map<
     NormalizedHotChannelClient,
@@ -106,8 +106,8 @@ export class FullBundleDevEnvironment extends DevEnvironment {
     )!
 
     this.hot.on('vite:module-loaded', (payload, client) => {
-      const clientId = this.clients.setupIfNeeded(client)
-      this.devEngine.registerModules(clientId, payload.modules)
+      this.clients.setupIfNeeded(client, payload.clientId)
+      this.devEngine.registerModules(payload.clientId, payload.modules)
     })
     this.hot.on('vite:client:disconnect', (_payload, client) => {
       const clientId = this.clients.delete(client)
@@ -184,6 +184,7 @@ export class FullBundleDevEnvironment extends DevEnvironment {
     this.waitForInitialBuildFinish().then(() => {
       debug?.('INITIAL: build done')
       this.hot.send({ type: 'full-reload', path: '*' })
+      this.initialBuildCompleted = true
     })
   }
 
@@ -260,7 +261,9 @@ export class FullBundleDevEnvironment extends DevEnvironment {
   async triggerBundleRegenerationIfStale(): Promise<boolean> {
     const bundleState = await this.devEngine.getBundleState()
     const shouldTrigger =
-      bundleState.hasStaleOutput && !bundleState.lastFullBuildFailed
+      bundleState.hasStaleOutput &&
+      !bundleState.lastFullBuildFailed &&
+      this.initialBuildCompleted
     if (shouldTrigger) {
       this.devEngine.ensureLatestBuildOutput().then(() => {
         this.debouncedFullReload()
@@ -270,16 +273,34 @@ export class FullBundleDevEnvironment extends DevEnvironment {
     return shouldTrigger
   }
 
+  async triggerLazyBundling(
+    moduleId: string | null,
+    clientId: string | null,
+  ): Promise<string | undefined> {
+    if (!moduleId || !clientId) {
+      return
+    }
+    debug?.(
+      `TRIGGER-LAZY: trigger lazy bundling for module ${moduleId} for client ${clientId}`,
+    )
+    return await this.devEngine.compileEntry(moduleId, clientId)
+  }
+
   override async close(): Promise<void> {
     this.memoryFiles.clear()
     await Promise.all([super.close(), this.devEngine.close()])
+    this.initialBuildCompleted = false
   }
 
   private async getRolldownOptions() {
     const chunkMetadataMap = new ChunkMetadataMap()
     const rolldownOptions = resolveRolldownOptions(this, chunkMetadataMap)
     rolldownOptions.experimental ??= {}
     rolldownOptions.experimental.devMode = {
+      lazy: true,
+      ...(typeof rolldownOptions.experimental.devMode === 'object'
+        ? rolldownOptions.experimental.devMode
+        : {}),
       implement: await getHmrImplementation(this.getTopLevelConfig()),
     }
 
@@ -382,14 +403,15 @@ class Clients {
   private clientToId = new Map<NormalizedHotChannelClient, string>()
   private idToClient = new Map<string, NormalizedHotChannelClient>()
 
-  setupIfNeeded(client: NormalizedHotChannelClient): string {
+  setupIfNeeded(client: NormalizedHotChannelClient, clientId: string) {
     const id = this.clientToId.get(client)
-    if (id) return id
-
-    const newId = randomUUID()
-    this.clientToId.set(client, newId)
-    this.idToClient.set(newId, client)
-    return newId
+    if (id && id !== clientId) {
+      throw new Error(
+        'client ID conflict detected. Please restart the dev server.',
+      )
+    }
+    this.clientToId.set(client, clientId)
+    this.idToClient.set(clientId, client)
   }
 
   get(id: string): NormalizedHotChannelClient | undefined {

packages/vite/src/node/server/index.ts

@@ -107,6 +107,7 @@ import type { DevEnvironment } from './environment'
 import { hostValidationMiddleware } from './middlewares/hostCheck'
 import { rejectInvalidRequestMiddleware } from './middlewares/rejectInvalidRequest'
 import { memoryFilesMiddleware } from './middlewares/memoryFiles'
+import { triggerLazyBundlingMiddleware } from './middlewares/triggerLazyBundling'
 
 const usedConfigs = new WeakSet<ResolvedConfig>()
 
@@ -993,6 +994,7 @@ export async function _createServer(
   }
 
   if (config.experimental.bundledDev) {
+    middlewares.use(triggerLazyBundlingMiddleware(server))
     middlewares.use(memoryFilesMiddleware(server))
   } else {
     // main transform middleware

packages/vite/src/node/server/middlewares/triggerLazyBundling.ts

@@ -0,0 +1,41 @@
+import type { Connect } from '#dep-types/connect'
+import type { ViteDevServer } from '..'
+import { FullBundleDevEnvironment } from '../environments/fullBundleEnvironment'
+
+export function triggerLazyBundlingMiddleware(
+  server: ViteDevServer,
+): Connect.NextHandleFunction {
+  const environment =
+    server.environments.client instanceof FullBundleDevEnvironment
+      ? server.environments.client
+      : undefined
+  if (!environment) {
+    throw new Error(
+      'triggerLazyBundlingMiddleware can only be used for fullBundleMode',
+    )
+  }
+
+  return async function viteTriggerLazyBundlingMiddleware(req, res, next) {
+    if (!req.url?.startsWith('/@vite/lazy?')) {
+      return next()
+    }
+
+    let params: URLSearchParams
+    try {
+      params = new URL(`http://localhost${req.url}`).searchParams
+    } catch {
+      // Malformed URL
+      return next()
+    }
+
+    const moduleId = params.get('id')
+    const clientId = params.get('clientId')
+    const code = await environment.triggerLazyBundling(moduleId, clientId)
+    if (code == null) {
+      return next()
+    }
+
+    res!.setHeader('Content-Type', 'application/javascript')
+    return res!.end(code)
+  }
+}

packages/vite/types/customEvent.d.ts

@@ -18,7 +18,7 @@ export interface CustomEventMap {
   /** @internal */
   'vite:forward-console': ForwardConsolePayload
   /** @internal */
-  'vite:module-loaded': { modules: string[] }
+  'vite:module-loaded': { modules: string[]; clientId: string }
 
   // server events
   'vite:client:connect': undefined

playground/hmr-full-bundle-mode/__tests__/hmr-full-bundle-mode.spec.ts

@@ -183,4 +183,9 @@ if (isBuild) {
     )
     await expect.poll(() => page.textContent('.worker-url')).toBe('worker-url')
   })
+
+  test('lazy bundling', async () => {
+    await page.click('#load-dynamic')
+    await expect.poll(() => page.textContent('.dynamic')).toBe('loaded')
+  })
 }

playground/hmr-full-bundle-mode/dynamic.js

@@ -0,0 +1,5 @@
+text('.dynamic', 'loaded')
+
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}

playground/hmr-full-bundle-mode/index.html

@@ -5,5 +5,9 @@ <h1>HMR Full Bundle Mode</h1>
 <div class="asset"></div>
 <div class="worker-query"></div>
 <div class="worker-url"></div>
+<div>
+  <button id="load-dynamic">Load dynamic</button>
+  <div class="dynamic"></div>
+</div>
 
 <script type="module" src="./main.js"></script>

playground/hmr-full-bundle-mode/main.js

@@ -19,6 +19,10 @@ workerUrl.addEventListener('message', (e) => {
   text('.worker-url', e.data)
 })
 
+document.querySelector('#load-dynamic').addEventListener('click', () => {
+  import('./dynamic.js')
+})
+
 function text(el, text) {
   document.querySelector(el).textContent = text
 }