├── .gitignore
├── index.html
├── package.json
├── vite.config.js
├── README.md
└── genModules.js


/.gitignore:
--------------------------------------------------------------------------------
1 | modules
2 | node_modules


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 | <script type="module" src="/modules/main.ts"></script>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "scripts": {
3 |     "dev": "vite",
4 |     "build": "node genModules"
5 |   }
6 | }


--------------------------------------------------------------------------------
/vite.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   plugins: [
 3 |     {
 4 |       name: 'make-it-slow',
 5 |       async transform(code) {
 6 |         // simulate a 5ms transform
 7 |         await new Promise((r) => setTimeout(r, 5))
 8 |         return code
 9 |       }
10 |     }
11 |   ]
12 | }
13 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | This benchmark tests Vite's initial page loading performance by simulating module graphs with different nested import chain depth and amount of parallel requests. Each file also has a simulated 5ms transform time (see `vite.config.js`).
2 | 
3 | 1. Build and link Vite locally into the project
4 | 2. `node genModules` (adjust depth and concurrency for different graph shapes)
5 | 3. Run `vite` to test load time
6 | 


--------------------------------------------------------------------------------
/genModules.js:
--------------------------------------------------------------------------------
 1 | // generate a tree of nested modules
 2 | const fs = require('fs')
 3 | 
 4 | // layers of nested imports
 5 | const MAX_DEPTH = 3
 6 | // parallel module imports per layer
 7 | const concurrency = 7
 8 | 
 9 | let total = 0
10 | 
11 | fs.rmSync('modules', { recursive: true })
12 | fs.mkdirSync('modules')
13 | 
14 | function genFile(id, depth) {
15 |   total++
16 |   if (depth >= MAX_DEPTH) {
17 |     fs.writeFileSync(`./modules/${id}.ts`, '')
18 |     return
19 |   }
20 |   let content = ''
21 |   for (let i = 0; i < concurrency; i++) {
22 |     const childId = `${id}_${i}`
23 |     content += `\nimport './${childId}.ts'`
24 |     genFile(childId, depth + 1)
25 |   }
26 |   // console.log(`writing ${id}`)
27 |   if (id === 'main') {
28 |     content += `\nalert(performance.now())`
29 |   }
30 |   fs.writeFileSync(`./modules/${id}.ts`, content)
31 | }
32 | 
33 | genFile('main', 0)
34 | console.log(`generated ${total} files.`)
35 | 


--------------------------------------------------------------------------------