mirror of https://github.com/vuejs/vitepress
feat: add support for asset sharding (#5432)
Divyansh Singh
3 weeks ago
committed by
GitHub
parent
b0452c5d8f
commit
5f69cc9d90
@ -0,0 +1,119 @@
|
|||||||
|
import { readFileSync, readdirSync } from 'node:fs'
|
||||||
|
import { join, resolve, sep } from 'node:path'
|
||||||
|
import { fileURLToPath } from 'node:url'
|
||||||
|
|
||||||
|
import { newPage, realErrors, waitForHydration, type TestPage } from './helpers'
|
||||||
|
|
||||||
|
const dir = resolve(fileURLToPath(import.meta.url), '..')
|
||||||
|
const dist = (...p: string[]) =>
|
||||||
|
join(dir, 'fixture/.vitepress/dist-sharded', ...p)
|
||||||
|
const origin = () => `http://localhost:${process.env['SHARDED_PORT']}`
|
||||||
|
|
||||||
|
// output-relative paths of everything under assets/
|
||||||
|
const files = () =>
|
||||||
|
readdirSync(dist('assets'), { recursive: true, withFileTypes: true })
|
||||||
|
.filter((e) => e.isFile())
|
||||||
|
.map((e) =>
|
||||||
|
join(e.parentPath, e.name)
|
||||||
|
.slice(dist('assets').length + 1)
|
||||||
|
.split(sep)
|
||||||
|
.join('/')
|
||||||
|
)
|
||||||
|
|
||||||
|
const isShardedPath = (f: string) => /^[0-2]\/[^/]+$/.test(f)
|
||||||
|
|
||||||
|
describe('assetsShards emit', () => {
|
||||||
|
test('page chunks land in numbered subdirectories', () => {
|
||||||
|
const pages = files().filter((f) => /\.md\.[\w-]+(\.lean)?\.js$/.test(f))
|
||||||
|
expect(pages.length).toBeGreaterThan(0)
|
||||||
|
expect(pages.every(isShardedPath)).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('imported assets are sharded too, shared chunks and the app are not', () => {
|
||||||
|
const all = files()
|
||||||
|
const assets = all.filter(
|
||||||
|
(f) => /\.(png|woff2|css)$/.test(f) && !/^vp-icons\./.test(f)
|
||||||
|
)
|
||||||
|
expect(assets.length).toBeGreaterThan(0)
|
||||||
|
expect(assets.every(isShardedPath)).toBe(true)
|
||||||
|
expect(all.some((f) => /^chunks\/framework\.[\w-]+\.js$/.test(f))).toBe(
|
||||||
|
true
|
||||||
|
)
|
||||||
|
expect(all.some((f) => /^app\.[\w-]+\.js$/.test(f))).toBe(true)
|
||||||
|
})
|
||||||
|
|
||||||
|
test('hash map entries carry the shard and resolve to real files', () => {
|
||||||
|
const map: Record<string, string> = JSON.parse(
|
||||||
|
readFileSync(dist('hashmap.json'), 'utf-8')
|
||||||
|
)
|
||||||
|
// hash map keys are lowercased page names, file names keep their case
|
||||||
|
const lower = new Set(files().map((f) => f.toLowerCase()))
|
||||||
|
expect(Object.keys(map).length).toBeGreaterThan(0)
|
||||||
|
for (const [page, entry] of Object.entries(map)) {
|
||||||
|
expect(entry).toMatch(/^[0-2]\/[\w-]+$/)
|
||||||
|
const [shard, hash] = entry.split('/')
|
||||||
|
const chunk = `${shard}/${page}.${hash}`.toLowerCase()
|
||||||
|
expect(lower.has(`${chunk}.js`)).toBe(true)
|
||||||
|
expect(lower.has(`${chunk}.lean.js`)).toBe(true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
test('preload links point at files that exist', () => {
|
||||||
|
const existing = new Set(files().map((f) => `assets/${f}`))
|
||||||
|
for (const page of [
|
||||||
|
'index',
|
||||||
|
'sub/page',
|
||||||
|
'sub/deep/page2',
|
||||||
|
'moved/target'
|
||||||
|
]) {
|
||||||
|
const links = [
|
||||||
|
...readFileSync(dist(`${page}.html`), 'utf-8').matchAll(
|
||||||
|
/<link rel="modulepreload" href="\/([^"]+)">/g
|
||||||
|
)
|
||||||
|
].map((m) => m[1]!)
|
||||||
|
expect(links.some((l) => l.includes('.md.'))).toBe(true)
|
||||||
|
for (const link of links) expect(existing.has(link)).toBe(true)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
describe('assetsShards in the browser', () => {
|
||||||
|
let t: TestPage
|
||||||
|
|
||||||
|
beforeAll(async () => {
|
||||||
|
t = await newPage()
|
||||||
|
})
|
||||||
|
|
||||||
|
afterAll(async () => {
|
||||||
|
await t.page.close()
|
||||||
|
await t.browser.close()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('pages hydrate with sharded chunks', async () => {
|
||||||
|
await t.page.goto(`${origin()}/`)
|
||||||
|
await waitForHydration(t.page)
|
||||||
|
expect(await t.page.textContent('h1')).toContain('Home')
|
||||||
|
})
|
||||||
|
|
||||||
|
test('client-side navigation loads page chunks from their shard', async () => {
|
||||||
|
await t.page.evaluate(() => ((window as any).__spa_marker = 1))
|
||||||
|
await t.page.click('.vp-doc a[href="/sub/page.html"]')
|
||||||
|
await t.page.waitForFunction(() =>
|
||||||
|
document.querySelector('h1')?.textContent?.includes('Sub page')
|
||||||
|
)
|
||||||
|
expect(
|
||||||
|
await t.page.evaluate(() => (window as any).__spa_marker === 1)
|
||||||
|
).toBe(true)
|
||||||
|
const chunk = await t.page.evaluate(() =>
|
||||||
|
performance
|
||||||
|
.getEntriesByType('resource')
|
||||||
|
.map((r) => r.name)
|
||||||
|
.find((n) => /\/assets\/\d+\/sub_page\.md\.[\w-]+\.js$/.test(n))
|
||||||
|
)
|
||||||
|
expect(chunk).toBeDefined()
|
||||||
|
})
|
||||||
|
|
||||||
|
test('no console or page errors across the whole flow', () => {
|
||||||
|
expect(realErrors(t.errors)).toEqual([])
|
||||||
|
})
|
||||||
|
})
|
||||||
Loading…
Reference in new issue