fix: unminified build breaks __vitePreload

packages/playground/preload/__tests__/preload.spec.ts

@@ -11,4 +11,15 @@ if (isBuild) {
     const appHtml = await page.content()
     expect(appHtml).toMatch('This is <b>home</b> page.')
   })
+
+  test('dynamic import with comments', async () => {
+    await page.goto(viteTestUrl + '/#/hello')
+    const html = await page.content()
+    expect(html).toMatch(
+      /link rel="modulepreload".*?href="\/assets\/Hello\.\w{8}\.js"/
+    )
+    expect(html).toMatch(
+      /link rel="stylesheet".*?href="\/assets\/Hello\.\w{8}\.css"/
+    )
+  })
 }

packages/playground/preload/router.js

@@ -3,6 +3,11 @@ import Home from './src/components/Home.vue'
 
 const routes = [
   { path: '/', name: 'Home', component: Home },
+  {
+    path: '/hello',
+    name: 'Hello',
+    component: () => import(/* a comment */ './src/components/Hello.vue')
+  },
   {
     path: '/about',
     name: 'About',

packages/playground/preload/src/components/Hello.vue

@@ -0,0 +1,18 @@
+<template>
+  <h1>{{ msg }}</h1>
+  <div>
+    This is <b>hello</b> page.
+    <br />
+    Go to <router-link to="/">Home</router-link> page
+  </div>
+</template>
+
+<script setup>
+const msg = 'hello'
+</script>
+
+<style scoped>
+h1 {
+  color: red;
+}
+</style>

packages/playground/preload/src/components/Home.vue

@@ -3,6 +3,8 @@
     This is <b>home</b> page.
     <br />
     Go to <router-link to="/about">About</router-link> page
+    <br />
+    Go to <router-link to="/hello">Hello</router-link> page
   </div>
 </template>
 

packages/vite/src/node/plugins/importAnalysisBuild.ts

@@ -252,13 +252,24 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
           if (imports.length) {
             const s = new MagicString(code)
             for (let index = 0; index < imports.length; index++) {
-              const { s: start, e: end, d: dynamicIndex } = imports[index]
+              // To handle escape sequences in specifier strings, the .n field will be provided where possible.
+              const {
+                n: name,
+                s: start,
+                e: end,
+                d: dynamicIndex
+              } = imports[index]
               // check the chunk being imported
-              const url = code.slice(start, end)
+              let url = name
+              if (!url) {
+                const rawUrl = code.slice(start, end)
+                if (rawUrl[0] === `"` && rawUrl[rawUrl.length - 1] === `"`)
+                  url = rawUrl.slice(1, -1)
+              }
               const deps: Set<string> = new Set()
               let hasRemovedPureCssChunk = false
 
-              if (url[0] === `"` && url[url.length - 1] === `"`) {
+              if (url) {
                 const ownerFilename = chunk.fileName
                 // literal import - trace direct imports and add to deps
                 const analyzed: Set<string> = new Set<string>()
@@ -295,7 +306,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                 }
                 const normalizedFile = path.posix.join(
                   path.posix.dirname(chunk.fileName),
-                  url.slice(1, -1)
+                  url
                 )
                 addDeps(normalizedFile)
               }