feat: add import analysis cache

src/server/plugins/modules.ts

@@ -10,12 +10,19 @@ import { promises as fs } from 'fs'
 import { hmrClientPublicPath } from './hmr'
 import { parse } from '@babel/parser'
 import { StringLiteral } from '@babel/types'
+import LRUCache from 'lru-cache'
 
 const idToFileMap = new Map()
 const fileToIdMap = new Map()
 const webModulesMap = new Map()
+const rewriteCache = new LRUCache({ max: 65535 })
+
+export const modulesPlugin: Plugin = ({ root, app, watcher }) => {
+  // bust module rewrite cache on file change
+  watcher.on('change', (file) => {
+    rewriteCache.del('/' + path.relative(root, file))
+  })
 
-export const modulesPlugin: Plugin = ({ root, app }) => {
   // rewrite named module imports to `/@modules/:id` requests
   app.use(async (ctx, next) => {
     await next()
@@ -25,32 +32,43 @@ export const modulesPlugin: Plugin = ({ root, app }) => {
     }
 
     if (ctx.url === '/index.html') {
-      const html = await readBody(ctx.body)
-      await initLexer
-      ctx.body = html.replace(
-        /(<script\b[^>]*>)([\s\S]*?)<\/script>/gm,
-        (_, openTag, script) => {
-          return `${openTag}${rewriteImports(script, '/index.html')}</script>`
-        }
-      )
+      if (rewriteCache.has('/index.html')) {
+        ctx.body = rewriteCache.get('/index.html')
+      } else {
+        const html = await readBody(ctx.body)
+        await initLexer
+        ctx.body = html.replace(
+          /(<script\b[^>]*>)([\s\S]*?)<\/script>/gm,
+          (_, openTag, script) => {
+            return `${openTag}${rewriteImports(script, '/index.html')}</script>`
+          }
+        )
+        rewriteCache.set('/index.html', ctx.body)
+      }
     }
 
     // we are doing the js rewrite after all other middlewares have finished;
     // this allows us to post-process javascript produced by user middlewares
     // regardless of the extension of the original files.
     if (
       ctx.response.is('js') &&
+      !ctx.url.endsWith('.map') &&
       // skip internal client
       !ctx.path.startsWith(`/@hmr`) &&
       // only need to rewrite for <script> part in vue files
       !(ctx.path.endsWith('.vue') && ctx.query.type != null)
     ) {
-      await initLexer
-      ctx.body = rewriteImports(
-        await readBody(ctx.body),
-        ctx.url.replace(/(&|\?)t=\d+/, ''),
-        ctx.query.t
-      )
+      if (rewriteCache.has(ctx.path)) {
+        ctx.body = rewriteCache.get(ctx.path)
+      } else {
+        await initLexer
+        ctx.body = rewriteImports(
+          await readBody(ctx.body),
+          ctx.url.replace(/(&|\?)t=\d+/, ''),
+          ctx.query.t
+        )
+        rewriteCache.set(ctx.path, ctx.body)
+      }
     }
   })
 
@@ -199,6 +217,9 @@ const ensureMapEntry = (map: HMRStateMap, key: string): Set<string> => {
 }
 
 function rewriteImports(source: string, importer: string, timestamp?: string) {
+  if (typeof source !== 'string') {
+    source = String(source)
+  }
   try {
     const [imports] = parseImports(source)
 
@@ -264,7 +285,7 @@ function rewriteImports(source: string, importer: string, timestamp?: string) {
     return source
   } catch (e) {
     console.error(
-      `[vite] Error: module imports rewrite failed for ${importer}.`,
+      `[vite] Error: module imports rewrite failed for ${importer}.\n`,
       e
     )
     return source