feat: add preload test cases

docs/config/index.md

@@ -563,9 +563,9 @@ createServer()
 ### build.autoPreload
 
 - **Type:** `boolean`
-- **Default:** `false`
+- **Default:** `true`
 
-  Specify the output directory (relative to [project root](/guide/#index-html-and-project-root)).
+  whether to inject `__vitePreload` helper method.
 
 ### build.outDir
 

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

@@ -0,0 +1,32 @@
+import { isBuild } from '../../testUtils'
+import { port } from './serve'
+const url = `http://localhost:${port}`
+
+if (isBuild) {
+  test('preload on', async () => {
+    await page.goto(url)
+    let appHtml = await page.content()
+    expect(appHtml).not.toMatch(
+      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+    )
+    // after click button, we will run `__vitePreload` method and insert a modulepreload.
+    await page.click('button')
+    appHtml = await page.content()
+    expect(appHtml).toMatch(
+      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+    )
+  })
+} else {
+  test('preload off', async () => {
+    await page.goto(url)
+    let appHtml = await page.content()
+    expect(appHtml).not.toMatch(
+      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+    )
+    await page.click('button')
+    appHtml = await page.content()
+    expect(appHtml).not.toMatch(
+      /link rel="modulepreload".*?href="\/assets\/About\.\w{8}\.js"/
+    )
+  })
+}

packages/playground/preload/__tests__/serve.js

@@ -0,0 +1,58 @@
+// @ts-check
+// this is automtically detected by scripts/jestPerTestSetup.ts and will replace
+// the default e2e test serve behavior
+
+const path = require('path')
+const http = require('http')
+const sirv = require('sirv')
+
+const port = (exports.port = 9527)
+
+/**
+ * @param {string} root
+ * @param {boolean} isProd
+ */
+exports.serve = async function serve(root, isProd) {
+  let autoPreload = false
+  if (isProd) {
+    autoPreload = true
+  }
+  // build first
+  const { build } = require('vite')
+  await build({
+    root,
+    logLevel: 'silent',
+    build: {
+      minify: false,
+      autoPreload
+    }
+  })
+
+  // start static file server
+  const serve = sirv(path.resolve(root, 'dist'))
+  const httpServer = http.createServer((req, res) => {
+    if (req.url === '/ping') {
+      res.statusCode = 200
+      res.end('pong')
+    } else {
+      serve(req, res)
+    }
+  })
+
+  return new Promise((resolve, reject) => {
+    try {
+      const server = httpServer.listen(port, () => {
+        resolve({
+          // for test teardown
+          async close() {
+            await new Promise((resolve) => {
+              server.close(resolve)
+            })
+          }
+        })
+      })
+    } catch (e) {
+      reject(e)
+    }
+  })
+}

packages/playground/preload/index.html

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

packages/playground/preload/package.json

@@ -0,0 +1,18 @@
+{
+  "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"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^1.0.0",
+    "@vue/compiler-sfc": "^3.0.8"
+  }
+}

packages/playground/preload/src/About.vue

@@ -0,0 +1,8 @@
+<template>
+  <div>
+    This is about page.
+  </div>
+</template>
+
+<script setup>
+</script>

packages/playground/preload/src/App.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>This is app page</div>
+  <button type="button" @click="show = !show">show</button>
+  <div v-if="show">
+    <about />
+  </div>
+</template>
+
+<script setup>
+import { ref, defineAsyncComponent } from 'vue'
+const About = defineAsyncComponent(() => import('./About.vue'))
+const show = ref(false)
+</script>

packages/playground/preload/vite.config.js

@@ -0,0 +1,5 @@
+const vuePlugin = require('@vitejs/plugin-vue')
+
+module.exports = {
+  plugins: [vuePlugin()]
+}

packages/vite/src/node/build.ts

@@ -70,8 +70,7 @@ export interface BuildOptions {
    */
   polyfillDynamicImport?: boolean
   /**
-   * whether to inject `__vitePreload` method.
-   * Note: does not apply to library mode.
+   * whether to inject `__vitePreload` helper method.
    * @default true
    */
   autoPreload?: boolean