2022-10-19 15:29:01 +00:00
|
|
|
import { fileURLToPath } from 'node:url'
|
|
|
|
import fsp from 'node:fs/promises'
|
2023-06-28 13:49:50 +00:00
|
|
|
import { beforeAll, describe, expect, it } from 'vitest'
|
2024-08-23 19:33:47 +00:00
|
|
|
import { exec } from 'tinyexec'
|
2024-08-23 19:59:25 +00:00
|
|
|
import { glob } from 'tinyglobby'
|
2022-10-19 15:29:01 +00:00
|
|
|
import { join } from 'pathe'
|
|
|
|
|
2023-06-07 20:07:58 +00:00
|
|
|
describe.skipIf(process.env.SKIP_BUNDLE_SIZE === 'true' || process.env.ECOSYSTEM_CI)('minimal nuxt application', () => {
|
2022-10-19 15:29:01 +00:00
|
|
|
const rootDir = fileURLToPath(new URL('./fixtures/minimal', import.meta.url))
|
|
|
|
|
|
|
|
beforeAll(async () => {
|
2023-06-28 13:49:50 +00:00
|
|
|
await Promise.all([
|
2024-08-23 19:33:47 +00:00
|
|
|
exec('pnpm', ['nuxi', 'build', rootDir], { nodeOptions: { env: { EXTERNAL_VUE: 'false' } } }),
|
|
|
|
exec('pnpm', ['nuxi', 'build', rootDir], { nodeOptions: { env: { EXTERNAL_VUE: 'true' } } }),
|
2023-06-28 13:49:50 +00:00
|
|
|
])
|
2022-10-19 15:29:01 +00:00
|
|
|
}, 120 * 1000)
|
|
|
|
|
2023-06-28 13:49:50 +00:00
|
|
|
// Identical behaviour between inline/external vue options as this should only affect the server build
|
2024-09-13 10:50:36 +00:00
|
|
|
|
|
|
|
it('default client bundle size', async () => {
|
2024-09-18 19:41:53 +00:00
|
|
|
const [clientStats, clientStatsInlined] = await Promise.all((['.output', '.output-inline'])
|
2024-09-13 10:50:36 +00:00
|
|
|
.map(outputDir => analyzeSizes(['**/*.js'], join(rootDir, outputDir, 'public'))))
|
|
|
|
|
2024-09-18 19:41:53 +00:00
|
|
|
expect.soft(roundToKilobytes(clientStats!.totalBytes)).toMatchInlineSnapshot(`"114k"`)
|
|
|
|
expect.soft(roundToKilobytes(clientStatsInlined!.totalBytes)).toMatchInlineSnapshot(`"114k"`)
|
2024-09-13 10:50:36 +00:00
|
|
|
|
2024-09-18 19:41:53 +00:00
|
|
|
const files = new Set([...clientStats!.files, ...clientStatsInlined!.files].map(f => f.replace(/\..*\.js/, '.js')))
|
2024-09-13 10:50:36 +00:00
|
|
|
|
2024-09-13 11:47:22 +00:00
|
|
|
expect([...files]).toMatchInlineSnapshot(`
|
2024-09-13 10:50:36 +00:00
|
|
|
[
|
|
|
|
"_nuxt/entry.js",
|
|
|
|
]
|
|
|
|
`)
|
|
|
|
})
|
2022-10-19 15:29:01 +00:00
|
|
|
|
|
|
|
it('default server bundle size', async () => {
|
2023-06-28 13:49:50 +00:00
|
|
|
const serverDir = join(rootDir, '.output/server')
|
|
|
|
|
|
|
|
const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
|
2024-09-17 14:01:47 +00:00
|
|
|
expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot(`"207k"`)
|
2022-10-19 15:29:01 +00:00
|
|
|
|
2024-08-23 19:59:25 +00:00
|
|
|
const modules = await analyzeSizes(['node_modules/**/*'], serverDir)
|
2024-09-17 14:01:47 +00:00
|
|
|
expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot(`"1387k"`)
|
2022-10-19 15:29:01 +00:00
|
|
|
|
|
|
|
const packages = modules.files
|
|
|
|
.filter(m => m.endsWith('package.json'))
|
|
|
|
.map(m => m.replace('/package.json', '').replace('node_modules/', ''))
|
|
|
|
.sort()
|
|
|
|
expect(packages).toMatchInlineSnapshot(`
|
|
|
|
[
|
|
|
|
"@babel/parser",
|
2022-11-15 16:26:38 +00:00
|
|
|
"@unhead/dom",
|
2023-02-16 11:44:31 +00:00
|
|
|
"@unhead/shared",
|
2022-11-15 16:26:38 +00:00
|
|
|
"@unhead/ssr",
|
2022-10-19 15:29:01 +00:00
|
|
|
"@vue/compiler-core",
|
|
|
|
"@vue/compiler-dom",
|
|
|
|
"@vue/compiler-ssr",
|
|
|
|
"@vue/reactivity",
|
|
|
|
"@vue/runtime-core",
|
|
|
|
"@vue/runtime-dom",
|
|
|
|
"@vue/server-renderer",
|
|
|
|
"@vue/shared",
|
2024-06-26 13:18:05 +00:00
|
|
|
"db0",
|
2023-04-07 10:34:35 +00:00
|
|
|
"devalue",
|
2023-12-29 08:53:46 +00:00
|
|
|
"entities",
|
2022-10-19 15:29:01 +00:00
|
|
|
"estree-walker",
|
|
|
|
"hookable",
|
2023-05-11 08:37:32 +00:00
|
|
|
"source-map-js",
|
2022-10-19 15:29:01 +00:00
|
|
|
"ufo",
|
2023-02-16 11:44:31 +00:00
|
|
|
"unhead",
|
2022-10-19 15:29:01 +00:00
|
|
|
"vue",
|
|
|
|
"vue-bundle-renderer",
|
|
|
|
]
|
|
|
|
`)
|
|
|
|
})
|
2023-06-28 13:49:50 +00:00
|
|
|
|
|
|
|
it('default server bundle size (inlined vue modules)', async () => {
|
|
|
|
const serverDir = join(rootDir, '.output-inline/server')
|
|
|
|
|
|
|
|
const serverStats = await analyzeSizes(['**/*.mjs', '!node_modules'], serverDir)
|
2024-09-17 14:01:47 +00:00
|
|
|
expect.soft(roundToKilobytes(serverStats.totalBytes)).toMatchInlineSnapshot(`"555k"`)
|
2023-06-28 13:49:50 +00:00
|
|
|
|
2024-08-23 19:59:25 +00:00
|
|
|
const modules = await analyzeSizes(['node_modules/**/*'], serverDir)
|
2024-09-15 20:00:51 +00:00
|
|
|
expect.soft(roundToKilobytes(modules.totalBytes)).toMatchInlineSnapshot(`"88.2k"`)
|
2023-06-28 13:49:50 +00:00
|
|
|
|
|
|
|
const packages = modules.files
|
|
|
|
.filter(m => m.endsWith('package.json'))
|
|
|
|
.map(m => m.replace('/package.json', '').replace('node_modules/', ''))
|
|
|
|
.sort()
|
|
|
|
expect(packages).toMatchInlineSnapshot(`
|
|
|
|
[
|
|
|
|
"@unhead/dom",
|
|
|
|
"@unhead/shared",
|
|
|
|
"@unhead/ssr",
|
2024-06-26 13:18:05 +00:00
|
|
|
"db0",
|
2023-06-28 13:49:50 +00:00
|
|
|
"devalue",
|
|
|
|
"hookable",
|
|
|
|
"unhead",
|
|
|
|
]
|
|
|
|
`)
|
|
|
|
})
|
2022-10-19 15:29:01 +00:00
|
|
|
})
|
|
|
|
|
2024-08-23 19:59:25 +00:00
|
|
|
async function analyzeSizes (pattern: string[], rootDir: string) {
|
|
|
|
const files: string[] = await glob(pattern, { cwd: rootDir })
|
2022-10-19 15:29:01 +00:00
|
|
|
let totalBytes = 0
|
|
|
|
for (const file of files) {
|
2023-01-20 16:17:31 +00:00
|
|
|
const path = join(rootDir, file)
|
|
|
|
const isSymlink = (await fsp.lstat(path).catch(() => null))?.isSymbolicLink()
|
|
|
|
|
|
|
|
if (!isSymlink) {
|
|
|
|
const bytes = Buffer.byteLength(await fsp.readFile(path))
|
|
|
|
totalBytes += bytes
|
|
|
|
}
|
2022-10-19 15:29:01 +00:00
|
|
|
}
|
|
|
|
return { files, totalBytes }
|
|
|
|
}
|
2023-04-04 12:34:29 +00:00
|
|
|
|
|
|
|
function roundToKilobytes (bytes: number) {
|
2023-04-12 08:42:45 +00:00
|
|
|
return (bytes / 1024).toFixed(bytes > (100 * 1024) ? 0 : 1) + 'k'
|
2023-04-04 12:34:29 +00:00
|
|
|
}
|