diff --git a/playground/preload/__tests__/preload-disabled/preload-disabled.spec.ts b/playground/preload/__tests__/preload-disabled/preload-disabled.spec.ts
index 5be5b07a0774f6..638b8f241a0943 100644
--- a/playground/preload/__tests__/preload-disabled/preload-disabled.spec.ts
+++ b/playground/preload/__tests__/preload-disabled/preload-disabled.spec.ts
@@ -1,5 +1,5 @@
import { describe, expect, test } from 'vitest'
-import { browserLogs, isBuild, page, viteTestUrl } from '~utils'
+import { browserLogs, isBuild, page } from '~utils'
test('should have no 404s', () => {
browserLogs.forEach((msg) => {
@@ -9,12 +9,14 @@ test('should have no 404s', () => {
describe.runIf(isBuild)('build', () => {
test('dynamic import', async () => {
- const appHtml = await page.content()
- expect(appHtml).toMatch('This is home page.')
+ await page.waitForSelector('#done')
+ expect(await page.textContent('#done')).toBe('ran js')
})
test('dynamic import with comments', async () => {
- await page.goto(viteTestUrl + '/#/hello')
+ await page.click('#hello .load')
+ await page.waitForSelector('#hello output')
+
const html = await page.content()
expect(html).not.toMatch(/link rel="modulepreload"/)
expect(html).not.toMatch(/link rel="stylesheet"/)
diff --git a/playground/preload/__tests__/preload.spec.ts b/playground/preload/__tests__/preload.spec.ts
index 9407d26942456a..fd89d58a80b1a9 100644
--- a/playground/preload/__tests__/preload.spec.ts
+++ b/playground/preload/__tests__/preload.spec.ts
@@ -1,5 +1,5 @@
import { describe, expect, test } from 'vitest'
-import { browserLogs, isBuild, page, viteTestUrl } from '~utils'
+import { browserLogs, isBuild, page } from '~utils'
test('should have no 404s', () => {
browserLogs.forEach((msg) => {
@@ -9,18 +9,20 @@ test('should have no 404s', () => {
describe.runIf(isBuild)('build', () => {
test('dynamic import', async () => {
- const appHtml = await page.content()
- expect(appHtml).toMatch('This is home page.')
+ await page.waitForSelector('#done')
+ expect(await page.textContent('#done')).toBe('ran js')
})
test('dynamic import with comments', async () => {
- await page.goto(viteTestUrl + '/#/hello')
+ await page.click('#hello .load')
+ await page.waitForSelector('#hello output')
+
const html = await page.content()
expect(html).toMatch(
- /link rel="modulepreload".*?href=".*?\/assets\/Hello-\w{8}\.js"/,
+ /link rel="modulepreload".*?href=".*?\/assets\/hello-\w{8}\.js"/,
)
expect(html).toMatch(
- /link rel="stylesheet".*?href=".*?\/assets\/Hello-\w{8}\.css"/,
+ /link rel="stylesheet".*?href=".*?\/assets\/hello-\w{8}\.css"/,
)
})
})
diff --git a/playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts b/playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts
index 78a19d7c09cb35..c255919c4cf598 100644
--- a/playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts
+++ b/playground/preload/__tests__/resolve-deps/preload-resolve-deps.spec.ts
@@ -1,5 +1,5 @@
import { describe, expect, test } from 'vitest'
-import { browserLogs, isBuild, page, viteTestUrl } from '~utils'
+import { browserLogs, isBuild, page } from '~utils'
test('should have no 404s', () => {
browserLogs.forEach((msg) => {
@@ -9,19 +9,21 @@ test('should have no 404s', () => {
describe.runIf(isBuild)('build', () => {
test('dynamic import', async () => {
- const appHtml = await page.content()
- expect(appHtml).toMatch('This is home page.')
+ await page.waitForSelector('#done')
+ expect(await page.textContent('#done')).toBe('ran js')
})
test('dynamic import with comments', async () => {
- await page.goto(viteTestUrl + '/#/hello')
+ await page.click('#hello .load')
+ await page.waitForSelector('#hello output')
+
const html = await page.content()
expect(html).toMatch(
- /link rel="modulepreload".*?href="http.*?\/Hello-\w{8}\.js"/,
+ /link rel="modulepreload".*?href="http.*?\/hello-\w{8}\.js"/,
)
expect(html).toMatch(/link rel="modulepreload".*?href="\/preloaded.js"/)
expect(html).toMatch(
- /link rel="stylesheet".*?href="http.*?\/Hello-\w{8}\.css"/,
+ /link rel="stylesheet".*?href="http.*?\/hello-\w{8}\.css"/,
)
})
})
diff --git a/playground/preload/index.html b/playground/preload/index.html
index 492481daeea2a5..59f13ff117eb5d 100644
--- a/playground/preload/index.html
+++ b/playground/preload/index.html
@@ -1,10 +1,19 @@
-
+preload
+
+
+
diff --git a/playground/preload/package.json b/playground/preload/package.json
index 187ab8f45adb40..2e236a4a69b83e 100644
--- a/playground/preload/package.json
+++ b/playground/preload/package.json
@@ -16,12 +16,7 @@
"debug:preload-disabled": "node --inspect-brk ../../packages/vite/bin/vite --config vite.config-preload-disabled.ts",
"preview:preload-disabled": "vite preview --config vite.config-preload-disabled.ts"
},
- "dependencies": {
- "vue": "^3.2.45",
- "vue-router": "^4.1.6"
- },
"devDependencies": {
- "@vitejs/plugin-vue": "^4.0.0",
"terser": "^5.16.1",
"@vitejs/test-dep-a": "file:./dep-a",
"@vitejs/test-dep-including-a": "file:./dep-including-a"
diff --git a/playground/preload/router.js b/playground/preload/router.js
deleted file mode 100644
index 2e4388967838ae..00000000000000
--- a/playground/preload/router.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createRouter, createWebHashHistory } from 'vue-router'
-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',
- component: () => import('./src/components/About.vue'),
- }, // Lazy load route component
-]
-
-export default createRouter({
- routes,
- history: createWebHashHistory(),
-})
diff --git a/playground/preload/src/App.vue b/playground/preload/src/App.vue
deleted file mode 100644
index 3582faf75e1216..00000000000000
--- a/playground/preload/src/App.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-
-
-
-
-
diff --git a/playground/preload/src/about.js b/playground/preload/src/about.js
new file mode 100644
index 00000000000000..56b5fd6e8bcfe1
--- /dev/null
+++ b/playground/preload/src/about.js
@@ -0,0 +1,3 @@
+import { msg } from '@vitejs/test-dep-including-a'
+
+document.querySelector('#about .msg').textContent = msg
diff --git a/playground/preload/src/components/About.vue b/playground/preload/src/components/About.vue
deleted file mode 100644
index a9449af186e38a..00000000000000
--- a/playground/preload/src/components/About.vue
+++ /dev/null
@@ -1,13 +0,0 @@
-
-
-
-
- This is about page.
-
- Go to Home page
-
- {{ msg }}
-
-
diff --git a/playground/preload/src/components/Hello.vue b/playground/preload/src/components/Hello.vue
deleted file mode 100644
index 33b44d278d305d..00000000000000
--- a/playground/preload/src/components/Hello.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-
- {{ msg }}
-
- This is hello page.
-
- Go to Home page
-
-
-
-
-
-
diff --git a/playground/preload/src/components/Home.vue b/playground/preload/src/components/Home.vue
deleted file mode 100644
index 20f6b4948ac30a..00000000000000
--- a/playground/preload/src/components/Home.vue
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
- This is home page.
-
- Go to About page
-
- Go to Hello page
-
-
-
-
diff --git a/playground/preload/src/hello.js b/playground/preload/src/hello.js
new file mode 100644
index 00000000000000..d2c5ee4ff3f9e5
--- /dev/null
+++ b/playground/preload/src/hello.js
@@ -0,0 +1,5 @@
+import style from './hello.module.css'
+
+const msg = document.querySelector('#hello .msg')
+msg.textContent = 'hello'
+msg.classList.add(style.h1)
diff --git a/playground/preload/src/hello.module.css b/playground/preload/src/hello.module.css
new file mode 100644
index 00000000000000..23910a7820b889
--- /dev/null
+++ b/playground/preload/src/hello.module.css
@@ -0,0 +1,3 @@
+.h1 {
+ color: red;
+}
diff --git a/playground/preload/src/main.js b/playground/preload/src/main.js
new file mode 100644
index 00000000000000..d6c80df573ebff
--- /dev/null
+++ b/playground/preload/src/main.js
@@ -0,0 +1,16 @@
+const ids = {
+ hello: async () => {
+ await import(/* a comment */ './hello.js')
+ },
+ about: async () => {
+ await import('./about.js') // lazy load
+ },
+}
+
+for (const [id, loader] of Object.entries(ids)) {
+ const loadButton = document.querySelector(`#${id} .load`)
+ loadButton.addEventListener('click', async () => {
+ await loader()
+ loadButton.insertAdjacentHTML('afterend', '')
+ })
+}
diff --git a/playground/preload/vite.config-preload-disabled.ts b/playground/preload/vite.config-preload-disabled.ts
index ea420d7e721590..4cef9067fe93f2 100644
--- a/playground/preload/vite.config-preload-disabled.ts
+++ b/playground/preload/vite.config-preload-disabled.ts
@@ -1,8 +1,6 @@
-import vuePlugin from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
export default defineConfig({
- plugins: [vuePlugin()],
build: {
outDir: 'dist/preload-disabled',
minify: 'terser',
diff --git a/playground/preload/vite.config-resolve-deps.ts b/playground/preload/vite.config-resolve-deps.ts
index 499096e09c69bb..d9a859c2491b5e 100644
--- a/playground/preload/vite.config-resolve-deps.ts
+++ b/playground/preload/vite.config-resolve-deps.ts
@@ -1,8 +1,6 @@
-import vuePlugin from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
export default defineConfig({
- plugins: [vuePlugin()],
build: {
outDir: 'dist/resolve-deps',
minify: 'terser',
@@ -16,7 +14,7 @@ export default defineConfig({
},
modulePreload: {
resolveDependencies(filename, deps, { hostId, hostType }) {
- if (filename.includes('Hello')) {
+ if (filename.includes('hello')) {
return [...deps, 'preloaded.js']
}
return deps
diff --git a/playground/preload/vite.config.ts b/playground/preload/vite.config.ts
index 2c50a70759c138..c6aa914e71aadf 100644
--- a/playground/preload/vite.config.ts
+++ b/playground/preload/vite.config.ts
@@ -1,8 +1,6 @@
-import vuePlugin from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
export default defineConfig({
- plugins: [vuePlugin()],
build: {
outDir: 'dist/normal',
minify: 'terser',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6fb5671e0e696a..8848e8eedcbd6b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -758,17 +758,10 @@ importers:
playground/preload:
specifiers:
- '@vitejs/plugin-vue': ^4.0.0
'@vitejs/test-dep-a': file:./dep-a
'@vitejs/test-dep-including-a': file:./dep-including-a
terser: ^5.16.1
- vue: ^3.2.45
- vue-router: ^4.1.6
- dependencies:
- vue: 3.2.45
- vue-router: 4.1.6_vue@3.2.45
devDependencies:
- '@vitejs/plugin-vue': 4.0.0_vue@3.2.45
'@vitejs/test-dep-a': file:playground/preload/dep-a
'@vitejs/test-dep-including-a': file:playground/preload/dep-including-a
terser: 5.16.1