Add Vue integration test with 1000 components (#20055)
This PR adds an integration test with Vue where we use a 1000 components and where each component references a CSS file via `@reference`. Each component has a unique class that uses `@apply`. There are some discussions in https://github.com/tailwindlabs/tailwindcss/discussions/16429 that mention that this causes OOM issues. Right now I can't reproduce that, and even with a 1000 components, it produces CSS in a reasonable time: ``` vite v7.3.3 building client environment for production... ✓ 2011 modules transformed. dist/index.html 0.23 kB │ gzip: 0.18 kB dist/assets/index-DNVNFkYQ.css 106.65 kB │ gzip: 10.79 kB dist/assets/index-B8v7EbAN.js 223.84 kB │ gzip: 49.81 kB ✓ built in 3.17s ``` I also started a Vite server and triggered file changes to see if the memory would grow forever, which it didn't. After a 1000 changes, everything still behaves smoothly: <img width="1694" height="1856" alt="image" src="https://github.com/user-attachments/assets/b16800ae-4dce-4f0d-9d97-25f4cab21c1c" /> Making changes manually to a single component, result in proper HMR request that update the browser: https://github.com/user-attachments/assets/5c79ffc6-2329-4341-9d25-82b000093e31 This test is here to make sure that it keeps working in the future. --- If I remove all `@reference` references, and usages of `@apply`, then the build time is indeed faster: ``` vite v7.3.3 building client environment for production... ✓ 2011 modules transformed. dist/index.html 0.23 kB │ gzip: 0.18 kB dist/assets/index-CcxXccJ1.css 106.61 kB │ gzip: 10.76 kB dist/assets/index-M92YFF0G.js 223.84 kB │ gzip: 49.81 kB ✓ built in 1.97s ``` So we go from `1.97s` → `3.17s`, which is a `1.2s` increase when you use `@reference` with `@apply` in 1000 files for a fresh build. I also saw some comments about the CSS growing whenever `@reference` was used, but as you can see in the snippets above they are at a stable size. ## Test plan 1. All tests still pass [ci-all] For testing on Windows / macOS --------- Co-authored-by: greptile-apps[bot] <165735046+greptile-apps[bot]@users.noreply.github.com>
This commit is contained in:
Robin Malfait
GitHub
parent
559f92bbf8
commit
0db226a222
1 changed files with 106 additions and 2 deletions
|
|
@ -1,5 +1,5 @@
|
|||
import { stripVTControlCharacters } from 'node:util'
|
||||
import { candidate, html, json, test, ts } from '../utils'
|
||||
import { candidate, css, html, json, test, ts } from '../utils'
|
||||
|
||||
test(
|
||||
'production build',
|
||||
|
|
@ -73,6 +73,110 @@ test(
|
|||
},
|
||||
)
|
||||
|
||||
{
|
||||
const VUE_COMPONENT_COUNT = 1_000
|
||||
|
||||
let vueComponentsWithReferences = Object.fromEntries(
|
||||
Array.from({ length: VUE_COMPONENT_COUNT }, (_, idx) => [
|
||||
`src/components/Component${idx}.vue`,
|
||||
html`
|
||||
<template>
|
||||
<div class="content-['component-${idx}']">Component ${idx}</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
@reference '../main.css';
|
||||
|
||||
.component-${idx} {
|
||||
@apply text-red-500;
|
||||
}
|
||||
</style>
|
||||
`,
|
||||
]),
|
||||
)
|
||||
|
||||
let vueComponentImports = Array.from(
|
||||
{ length: VUE_COMPONENT_COUNT },
|
||||
(_, idx) => `import Component${idx} from './components/Component${idx}.vue'`,
|
||||
).join('\n')
|
||||
|
||||
let vueComponentUsages = Array.from(
|
||||
{ length: VUE_COMPONENT_COUNT },
|
||||
(_, idx) => `<Component${idx} class="component-${idx}" />`,
|
||||
).join('\n')
|
||||
|
||||
test(
|
||||
'production build with many Vue style blocks referencing the main stylesheet',
|
||||
{
|
||||
fs: {
|
||||
'package.json': json`
|
||||
{
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"vue": "^3.4.37",
|
||||
"tailwindcss": "workspace:^"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^5.1.2",
|
||||
"@tailwindcss/vite": "workspace:^",
|
||||
"vite": "^7"
|
||||
}
|
||||
}
|
||||
`,
|
||||
'vite.config.ts': ts`
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [vue(), tailwindcss()],
|
||||
})
|
||||
`,
|
||||
'index.html': html`
|
||||
<!doctype html>
|
||||
<html>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="./src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
'src/main.css': css`@import 'tailwindcss';`,
|
||||
'src/main.ts': ts`
|
||||
import { createApp } from 'vue'
|
||||
import './main.css'
|
||||
import App from './App.vue'
|
||||
|
||||
createApp(App).mount('#app')
|
||||
`,
|
||||
'src/App.vue': html`
|
||||
<script setup>
|
||||
${vueComponentImports}
|
||||
</script>
|
||||
|
||||
<template>${vueComponentUsages}</template>
|
||||
`,
|
||||
...vueComponentsWithReferences,
|
||||
},
|
||||
},
|
||||
async ({ fs, exec, expect }) => {
|
||||
await exec('pnpm vite build')
|
||||
|
||||
let files = await fs.glob('dist/**/*.css')
|
||||
expect(files).toHaveLength(1)
|
||||
|
||||
await fs.expectFileToContain(files[0][0], [
|
||||
candidate`content-['component-0']`,
|
||||
candidate`component-0`,
|
||||
candidate`content-['component-99']`,
|
||||
candidate`component-99`,
|
||||
candidate`content-['component-999']`,
|
||||
candidate`component-999`,
|
||||
])
|
||||
},
|
||||
)
|
||||
}
|
||||
|
||||
test(
|
||||
'error when using `@apply` without `@reference`',
|
||||
{
|
||||
|
|
@ -132,7 +236,7 @@ test(
|
|||
expect.assertions(1)
|
||||
|
||||
try {
|
||||
await exec('pnpm vite build')
|
||||
await exec('pnpm vite build', {}, { ignoreStdErr: true })
|
||||
} catch (error) {
|
||||
let [, message] =
|
||||
/error during build:([\s\S]*?)file:/g.exec(
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue