feat: improved cold start using deps scanner (#8869)

playground/ssr-vue/__tests__/fixtures/ssrModuleLoader-bad.js

@@ -0,0 +1,2 @@
+export const bad = 1
+throw new Error('it is an expected error')

playground/ssr-vue/__tests__/serve.ts

@@ -3,10 +3,13 @@
 
 import path from 'node:path'
 import kill from 'kill-port'
+import type { ViteDevServer } from 'vite'
 import { hmrPorts, isBuild, ports, rootDir } from '~utils'
 
 export const port = ports['ssr-vue']
 
+export let viteServer: ViteDevServer
+
 export async function serve(): Promise<{ close(): Promise<void> }> {
   if (isBuild) {
     // build first
@@ -44,6 +47,7 @@ export async function serve(): Promise<{ close(): Promise<void> }> {
     isBuild,
     hmrPorts['ssr-vue']
   )
+  viteServer = vite
 
   return new Promise((resolve, reject) => {
     try {

playground/ssr-vue/__tests__/ssr-vue.spec.ts

@@ -1,4 +1,5 @@
 import { resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
 import fetch from 'node-fetch'
 import { port } from './serve'
 import {
@@ -7,7 +8,8 @@ import {
   getColor,
   isBuild,
   page,
-  untilUpdated
+  untilUpdated,
+  viteServer
 } from '~utils'
 
 const url = `http://localhost:${port}/test/`
@@ -202,3 +204,33 @@ test.runIf(isBuild)('dynamic css file should be preloaded', async () => {
     expect(homeHtml).toMatch(file)
   }
 })
+
+test.runIf(!isBuild)(
+  'always throw error when evaluating an wrong SSR module',
+  async () => {
+    const __filename = fileURLToPath(import.meta.url)
+    const badjs = resolve(__filename, '../fixtures/ssrModuleLoader-bad.js')
+    const THROW_MESSAGE = 'it is an expected error'
+
+    const spy = vi.spyOn(console, 'error').mockImplementation(() => {})
+    const expectedErrors = []
+    for (const _ of [0, 1]) {
+      try {
+        console.log(viteServer)
+        await viteServer.ssrLoadModule(badjs, { fixStacktrace: true })
+      } catch (e) {
+        expectedErrors.push(e)
+      }
+    }
+    expect(expectedErrors).toHaveLength(2)
+    expect(expectedErrors[0]).toBe(expectedErrors[1])
+    expectedErrors.forEach((error) => {
+      expect(error?.message).toContain(THROW_MESSAGE)
+    })
+    expect(spy).toBeCalledTimes(1)
+    const [firstParameter] = spy.mock.calls[0]
+    expect(firstParameter).toContain('Error when evaluating SSR module')
+    expect(firstParameter).toContain(THROW_MESSAGE)
+    spy.mockClear()
+  }
+)

playground/vitestSetup.ts

@@ -35,6 +35,10 @@ export const viteBinPath = path.posix.join(
 
 let server: ViteDevServer | http.Server
 
+/**
+ * Vite Dev Server when testing serve
+ */
+export let viteServer: ViteDevServer
 /**
  * Root of the Vite fixture
  */
@@ -146,6 +150,7 @@ beforeAll(async (s) => {
         }
         if (serve) {
           server = await serve()
+          viteServer = mod.viteServer
           return
         }
       } else {
@@ -212,7 +217,7 @@ export async function startDefaultServe(): Promise<void> {
     process.env.VITE_INLINE = 'inline-serve'
     const testConfig = mergeConfig(options, config || {})
     viteConfig = testConfig
-    server = await (await createServer(testConfig)).listen()
+    viteServer = server = await (await createServer(testConfig)).listen()
     // use resolved port/base from server
     const devBase = server.config.base
     viteTestUrl = `http://localhost:${server.config.server.port}${

playground/vue-sourcemap/__tests__/__snapshots__/serve.spec.ts.snap → playground/vue-sourcemap/__tests__/__snapshots__/vue-sourcemap.spec.ts.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1
 
-exports[`serve:vue-sourcemap > css 1`] = `
+exports[`serve:vue-sourcemap > css > serve-css 1`] = `
 {
   "mappings": ";AAQA;EACE,UAAU;AACZ",
   "sources": [
@@ -47,7 +47,7 @@ exports[`serve:vue-sourcemap > css 1`] = `
 }
 `;
 
-exports[`serve:vue-sourcemap > css module 1`] = `
+exports[`serve:vue-sourcemap > css module > serve-css-module 1`] = `
 {
   "mappings": ";AAcA;EACE,UAAU;AACZ",
   "sources": [
@@ -94,7 +94,7 @@ exports[`serve:vue-sourcemap > css module 1`] = `
 }
 `;
 
-exports[`serve:vue-sourcemap > css scoped 1`] = `
+exports[`serve:vue-sourcemap > css scoped > serve-css-scoped 1`] = `
 {
   "mappings": ";AAoBA;EACE,UAAU;AACZ",
   "sources": [
@@ -141,7 +141,7 @@ exports[`serve:vue-sourcemap > css scoped 1`] = `
 }
 `;
 
-exports[`serve:vue-sourcemap > js 1`] = `
+exports[`serve:vue-sourcemap > js > serve-js 1`] = `
 {
   "mappings": "AAKA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;wBARlB,oBAAiB,WAAd,MAAU",
   "sources": [
@@ -165,7 +165,7 @@ console.log('setup')
 }
 `;
 
-exports[`serve:vue-sourcemap > less with additionalData 1`] = `
+exports[`serve:vue-sourcemap > less with additionalData > serve-less-with-additionalData 1`] = `
 {
   "mappings": "AAKA;EACE",
   "sources": [
@@ -187,7 +187,7 @@ exports[`serve:vue-sourcemap > less with additionalData 1`] = `
 }
 `;
 
-exports[`serve:vue-sourcemap > no script 1`] = `
+exports[`serve:vue-sourcemap > no script > serve-no-script 1`] = `
 {
   "mappings": ";;;wBACE,oBAAwB,WAArB,aAAiB",
   "sourceRoot": "",
@@ -204,7 +204,7 @@ exports[`serve:vue-sourcemap > no script 1`] = `
 }
 `;
 
-exports[`serve:vue-sourcemap > no template 1`] = `
+exports[`serve:vue-sourcemap > no template > serve-no-template 1`] = `
 {
   "mappings": "AACA,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;AAGP;AACd,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;",
   "sources": [
@@ -224,7 +224,7 @@ console.log('setup')
 }
 `;
 
-exports[`serve:vue-sourcemap > sass 1`] = `
+exports[`serve:vue-sourcemap > sass > serve-sass 1`] = `
 {
   "mappings": "AAKA;EACE",
   "sources": [
@@ -245,7 +245,7 @@ exports[`serve:vue-sourcemap > sass 1`] = `
 }
 `;
 
-exports[`serve:vue-sourcemap > sass with import 1`] = `
+exports[`serve:vue-sourcemap > sass with import > serve-sass-with-import 1`] = `
 {
   "mappings": "AAAA;EACE;;ACOF;EACE",
   "sources": [
@@ -273,7 +273,7 @@ exports[`serve:vue-sourcemap > sass with import 1`] = `
 }
 `;
 
-exports[`serve:vue-sourcemap > src imported 1`] = `
+exports[`serve:vue-sourcemap > src imported > serve-src-imported 1`] = `
 {
   "mappings": "AAAA;EACE,UAAU;AACZ",
   "sources": [
@@ -289,7 +289,7 @@ exports[`serve:vue-sourcemap > src imported 1`] = `
 }
 `;
 
-exports[`serve:vue-sourcemap > src imported sass 1`] = `
+exports[`serve:vue-sourcemap > src imported sass > serve-src-imported-sass 1`] = `
 {
   "mappings": "AAAA;EACE;;ACCF;EACE",
   "sources": [
@@ -310,7 +310,7 @@ exports[`serve:vue-sourcemap > src imported sass 1`] = `
 }
 `;
 
-exports[`serve:vue-sourcemap > ts 1`] = `
+exports[`serve:vue-sourcemap > ts > serve-ts 1`] = `
 {
   "mappings": ";AAKA,QAAQ,IAAI,WAAW;;;;;AAIvB,YAAQ,IAAI,UAAU;;;;;;;;uBARpB,oBAAiB,WAAd,MAAU",
   "sources": [

playground/vue-sourcemap/__tests__/serve.spec.ts → playground/vue-sourcemap/__tests__/vue-sourcemap.spec.ts

@@ -2,8 +2,10 @@ import { URL } from 'node:url'
 import {
   extractSourcemap,
   formatSourcemapForSnapshot,
+  isBuild,
   isServe,
-  page
+  page,
+  serverLogs
 } from '~utils'
 
 describe.runIf(isServe)('serve:vue-sourcemap', () => {
@@ -22,62 +24,70 @@ describe.runIf(isServe)('serve:vue-sourcemap', () => {
     const res = await page.request.get(new URL('./Js.vue', page.url()).href)
     const js = await res.text()
     const map = extractSourcemap(js)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-js')
   })
 
   test('ts', async () => {
     const res = await page.request.get(new URL('./Ts.vue', page.url()).href)
     const js = await res.text()
     const map = extractSourcemap(js)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-ts')
   })
 
   test('css', async () => {
     const css = await getStyleTagContentIncluding('.css ')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-css')
   })
 
   test('css module', async () => {
     const css = await getStyleTagContentIncluding('._css-module_')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-css-module')
   })
 
   test('css scoped', async () => {
     const css = await getStyleTagContentIncluding('.css-scoped[data-v-')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-css-scoped')
   })
 
   test('sass', async () => {
     const css = await getStyleTagContentIncluding('.sass ')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-sass')
   })
 
   test('sass with import', async () => {
     const css = await getStyleTagContentIncluding('.sass-with-import ')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot(
+      'serve-sass-with-import'
+    )
   })
 
   test('less with additionalData', async () => {
     const css = await getStyleTagContentIncluding('.less ')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot(
+      'serve-less-with-additionalData'
+    )
   })
 
   test('src imported', async () => {
     const css = await getStyleTagContentIncluding('.src-import[data-v-')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot(
+      'serve-src-imported'
+    )
   })
 
   test('src imported sass', async () => {
     const css = await getStyleTagContentIncluding('.src-import-sass[data-v-')
     const map = extractSourcemap(css)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot(
+      'serve-src-imported-sass'
+    )
   })
 
   test('no script', async () => {
@@ -86,7 +96,7 @@ describe.runIf(isServe)('serve:vue-sourcemap', () => {
     )
     const js = await res.text()
     const map = extractSourcemap(js)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-no-script')
   })
 
   test('no template', async () => {
@@ -95,6 +105,12 @@ describe.runIf(isServe)('serve:vue-sourcemap', () => {
     )
     const js = await res.text()
     const map = extractSourcemap(js)
-    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot()
+    expect(formatSourcemapForSnapshot(map)).toMatchSnapshot('serve-no-template')
+  })
+})
+
+test.runIf(isBuild)('should not output sourcemap warning (#4939)', () => {
+  serverLogs.forEach((log) => {
+    expect(log).not.toMatch('Sourcemap is likely to be incorrect')
   })
 })