fix: __VITE_PRELOAD__ replacement error (#4163)

Fixes #3051

Author: ygj6

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

@@ -0,0 +1,14 @@
+import { isBuild } from '../../testUtils'
+
+test('should have no 404s', () => {
+  browserLogs.forEach((msg) => {
+    expect(msg).not.toMatch('404')
+  })
+})
+
+if (isBuild) {
+  test('dynamic import', async () => {
+    let appHtml = await page.content()
+    expect(appHtml).toMatch('This is <b>home</b> page.')
+  })
+}

packages/playground/preload/index.html

@@ -0,0 +1,8 @@
+<div id="app"></div>
+<script type="module">
+  import { createApp } from 'vue'
+  import router from './router.js'
+  import App from './src/App.vue'
+
+  createApp(App).use(router).mount('#app')
+</script>

packages/playground/preload/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "test-preload",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "debug": "node --inspect-brk ../../vite/bin/vite",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.0.8",
+    "vue-router": "^4.0.6"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.0.0",
+    "@vue/compiler-sfc": "^3.0.8"
+  }
+}

packages/playground/preload/router.js

@@ -0,0 +1,16 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Home from './src/components/Home.vue'
+
+const routes = [
+  { path: '/', name: 'Home', component: Home },
+  {
+    path: '/about',
+    name: 'About',
+    component: () => import('./src/components/About.vue')
+  } // Lazy load route component
+]
+
+export default createRouter({
+  routes,
+  history: createWebHashHistory()
+})

packages/playground/preload/src/App.vue

@@ -0,0 +1,6 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script setup>
+</script>

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

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    This is <b>about</b> page.
+    <br>
+    Go to <router-link to="/">Home</router-link> page
+  </div>
+</template>
+
+<script setup>
+</script>

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

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    This is <b>home</b> page.
+    <br>
+    Go to <router-link to="/about">About</router-link> page
+  </div>
+</template>
+
+<script setup>
+</script>

packages/playground/preload/vite.config.js

@@ -0,0 +1,15 @@
+const vuePlugin = require('@vitejs/plugin-vue')
+
+module.exports = {
+  plugins: [vuePlugin()],
+  build: {
+    terserOptions: {
+      format: {
+        beautify: true
+      },
+      compress: {
+        passes: 3
+      }
+    }
+  }
+}

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

@@ -26,7 +26,7 @@ const preloadMarkerRE = new RegExp(`"${preloadMarker}"`, 'g')
  */
 function preload(baseModule: () => Promise<{}>, deps?: string[]) {
   // @ts-ignore
-  if (!__VITE_IS_MODERN__ || !deps) {
+  if (!__VITE_IS_MODERN__ || !deps || deps.length === 0) {
     return baseModule()
   }
 
@@ -262,7 +262,12 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                 addDeps(normalizedFile)
               }
 
-              const markPos = code.indexOf(preloadMarker, end)
+              let markPos = code.indexOf(preloadMarker, end)
+              // fix issue #3051
+              if (markPos === -1 && imports.length === 1) {
+                markPos = code.indexOf(preloadMarker)
+              }
+
               if (markPos > 0) {
                 s.overwrite(
                   markPos - 1,
@@ -271,7 +276,7 @@ export function buildImportAnalysisPlugin(config: ResolvedConfig): Plugin {
                   // preload when there are actual other deps.
                   deps.size > 1
                     ? `[${[...deps].map((d) => JSON.stringify(d)).join(',')}]`
-                    : `void 0`
+                    : `[]`
                 )
               }
             }