Skip to content

Commit 3f7a5f8

Browse files
hi-ogawaclaude
hi-ogawa
and
claude
authored
feat(experimental): add print and fail thresholds for importDurations (#9533)
Co-authored-by: Claude Opus 4.5 <[email protected]>
1 parent 65432a7 commit 3f7a5f8

File tree

13 files changed

+307
-47
lines changed

13 files changed

+307
-47
lines changed

‎docs/config/experimental.md‎

Lines changed: 53 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -187,17 +187,35 @@ Please leave feedback regarding this feature in a [GitHub Discussion](https://gi
187187
```ts
188188
interface ImportDurationsOptions {
189189
/**
190-
* Print import breakdown to CLI terminal after tests finish.
190+
* When to print import breakdown to CLI terminal.
191+
* - false: Never print (default)
192+
* - true: Always print
193+
* - 'on-warn': Print only when any import exceeds warn threshold
191194
*/
192-
print?: boolean
195+
print?: boolean | 'on-warn'
196+
/**
197+
* Fail the test run if any import exceeds the danger threshold.
198+
* When enabled and threshold exceeded, breakdown is always printed.
199+
* @default false
200+
*/
201+
failOnDanger?: boolean
193202
/**
194203
* Maximum number of imports to collect and display.
195204
*/
196205
limit?: number
206+
/**
207+
* Duration thresholds in milliseconds for coloring and warnings.
208+
*/
209+
thresholds?: {
210+
/** Threshold for yellow/warning color. @default 100 */
211+
warn?: number
212+
/** Threshold for red/danger color and failOnDanger. @default 500 */
213+
danger?: number
214+
}
197215
}
198216
```
199217

200-
- **Default:** `{ print: false, limit: 0 }` (`limit` is 10 if `print` or UI is enabled)
218+
- **Default:** `{ print: false, failOnDanger: false, limit: 0, thresholds: { warn: 100, danger: 500 } }` (`limit` is 10 if `print` or UI is enabled)
201219

202220
Configure import duration collection and display.
203221

@@ -206,26 +224,54 @@ The `print` option controls CLI terminal output. The `limit` option controls how
206224
- Self: the time it took to import the module, excluding static imports;
207225
- Total: the time it took to import the module, including static imports. Note that this does not include `transform` time of the current module.
208226

209-
<img alt="An example of import breakdown in the terminal" src="/reporter-import-breakdown.png" />
227+
<img alt="An example of import breakdown in the terminal" src="/reporter-import-breakdown.png" img-dark />
228+
<img alt="An example of import breakdown in the terminal" src="/reporter-import-breakdown-light.png" img-light />
210229

211230
Note that if the file path is too long, Vitest will truncate it at the start until it fits 45 character limit.
212231

213232
### experimental.importDurations.print {#experimental-importdurationsprint}
214233

234+
- **Type:** `boolean | 'on-warn'`
235+
- **Default:** `false`
236+
237+
Controls when to print import breakdown to CLI terminal after tests finish. This only works with [`default`](/guide/reporters#default), [`verbose`](/guide/reporters#verbose), or [`tree`](/guide/reporters#tree) reporters.
238+
239+
- `false`: Never print breakdown
240+
- `true`: Always print breakdown
241+
- `'on-warn'`: Print only when any import exceeds the `thresholds.warn` value
242+
243+
### experimental.importDurations.failOnDanger {#experimental-importdurationsfailondanger}
244+
215245
- **Type:** `boolean`
216246
- **Default:** `false`
217247

218-
Print import breakdown to CLI terminal after tests finish. This only works with [`default`](/guide/reporters#default), [`verbose`](/guide/reporters#verbose), or [`tree`](/guide/reporters#tree) reporters.
248+
Fail the test run if any import exceeds the `thresholds.danger` value. When enabled and the threshold is exceeded, the breakdown is always printed regardless of the `print` setting.
249+
250+
This is useful for enforcing import performance budgets in CI:
251+
252+
```bash
253+
vitest --experimental.importDurations.failOnDanger
254+
```
219255

220256
### experimental.importDurations.limit {#experimental-importdurationslimit}
221257

222258
- **Type:** `number`
223-
- **Default:** `0` (or `10` if `print` or UI is enabled)
259+
- **Default:** `0` (or `10` if `print`, `failOnDanger`, or UI is enabled)
224260

225261
Maximum number of imports to collect and display in CLI output, [Vitest UI](/guide/ui#import-breakdown), and third-party reporters.
226262

263+
### experimental.importDurations.thresholds {#experimental-importdurationsthresholds}
264+
265+
- **Type:** `{ warn?: number; danger?: number }`
266+
- **Default:** `{ warn: 100, danger: 500 }`
267+
268+
Duration thresholds in milliseconds for coloring and warnings:
269+
270+
- `warn`: Threshold for yellow/warning color (default: 100ms)
271+
- `danger`: Threshold for red/danger color and `failOnDanger` (default: 500ms)
272+
227273
::: info
228-
[Vitest UI](/guide/ui#import-breakdown) shows a breakdown of imports automatically if at least one file took longer than 500 milliseconds to load. You can manually set this option to `false` to disable this.
274+
[Vitest UI](/guide/ui#import-breakdown) shows a breakdown of imports automatically if at least one file took longer than the `danger` threshold to load.
229275
:::
230276

231277
## experimental.viteModuleRunner <Version type="experimental">4.1.0</Version> {#experimental-vitemodulerunner}

‎docs/guide/cli-generated.md‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -847,10 +847,10 @@ Enable caching of modules on the file system between reruns.
847847

848848
### experimental.importDurations.print
849849

850-
- **CLI:** `--experimental.importDurations.print`
850+
- **CLI:** `--experimental.importDurations.print <boolean|on-warn>`
851851
- **Config:** [experimental.importDurations.print](/config/experimental#experimental-importdurations-print)
852852

853-
Print import breakdown to CLI terminal after tests finish (default: false).
853+
When to print import breakdown to CLI terminal. Use `true` to always print, `false` to never print, or `on-warn` to print only when imports exceed the warn threshold (default: false).
854854

855855
### experimental.importDurations.limit
856856

@@ -859,6 +859,27 @@ Print import breakdown to CLI terminal after tests finish (default: false).
859859

860860
Maximum number of imports to collect and display (default: 0, or 10 if print or UI is enabled).
861861

862+
### experimental.importDurations.failOnDanger
863+
864+
- **CLI:** `--experimental.importDurations.failOnDanger`
865+
- **Config:** [experimental.importDurations.failOnDanger](/config/experimental#experimental-importdurations-failondanger)
866+
867+
Fail the test run if any import exceeds the danger threshold (default: false).
868+
869+
### experimental.importDurations.thresholds.warn
870+
871+
- **CLI:** `--experimental.importDurations.thresholds.warn <number>`
872+
- **Config:** [experimental.importDurations.thresholds.warn](/config/experimental#experimental-importdurations-thresholds-warn)
873+
874+
Warning threshold - imports exceeding this are shown in yellow/orange (default: 100).
875+
876+
### experimental.importDurations.thresholds.danger
877+
878+
- **CLI:** `--experimental.importDurations.thresholds.danger <number>`
879+
- **Config:** [experimental.importDurations.thresholds.danger](/config/experimental#experimental-importdurations-thresholds-danger)
880+
881+
Danger threshold - imports exceeding this are shown in red (default: 500).
882+
862883
### experimental.viteModuleRunner
863884

864885
- **CLI:** `--experimental.viteModuleRunner`

‎docs/guide/ui.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,7 @@ If the module was inlined, you will see three more windows:
107107

108108
All static imports in the "Source" window show a total time it took to evaluate them by the current module. If the import was already evaluated in the module graph, it will show `0ms` because it is cached by that point.
109109

110-
If the module took longer than 500 milliseconds to load, the time will be displayed in red. If the module took longer than 100 milliseconds, the time will be displayed in orange.
110+
If the module took longer than the [`danger` threshold](/config/experimental#experimental-importdurations-thresholds) (default: 500ms) to load, the time will be displayed in red. If the module took longer than the [`warn` threshold](/config/experimental#experimental-importdurations-thresholds) (default: 100ms), the time will be displayed in orange.
111111

112112
You can click on an import source to jump into that module and traverse the graph further (note `./support/assertions/index.ts` below).
113113

@@ -142,6 +142,6 @@ You can click on the module to see the Module Info. If the module is external, i
142142

143143
The breakdown shows a list of modules with self time, total time, and a percentage relative to the time it took to load the whole test file.
144144

145-
The "Show Import Breakdown" icon will have a red color if there is at least one file that took longer than 500 milliseconds to load, and it will be orange if there is at least one file that took longer than 100 milliseconds.
145+
The "Show Import Breakdown" icon will have a red color if there is at least one file that took longer than the [`danger` threshold](/config/experimental#experimental-importdurations-thresholds) (default: 500ms) to load, and it will be orange if there is at least one file that took longer than the [`warn` threshold](/config/experimental#experimental-importdurations-thresholds) (default: 100ms).
146146

147147
You can use [`experimental.importDurations.limit`](/config/experimental#experimental-importdurationslimit) to control the number of imports displayed.

‎docs/public/reporter-import-breakdown-light.png‎

71.8 KB
Loading

‎docs/public/reporter-import-breakdown.png‎

15.6 KB
Loading

‎packages/ui/client/components/views/ViewModuleGraph.vue‎

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
PositionInitializers,
1818
} from 'd3-graph-controller'
1919
import { computed, onMounted, onUnmounted, ref, shallowRef, toRefs, watch } from 'vue'
20-
import { isReport } from '~/composables/client'
20+
import { config, isReport } from '~/composables/client'
2121
import { currentModule } from '~/composables/navigation'
2222
import IconButton from '../IconButton.vue'
2323
import Modal from '../Modal.vue'
@@ -43,14 +43,18 @@ const focusedNode = ref<string | null>(null)
4343
const filteredGraph = shallowRef<ModuleGraph>(graph.value)
4444
const breakdownIconClass = computed(() => {
4545
let textClass = ''
46-
const importDurations = currentModule.value?.importDurations || {}
46+
const importDurations = currentModule.value?.importDurations
47+
if (!importDurations) {
48+
return textClass
49+
}
50+
const thresholds = config.value.experimental.importDurations.thresholds
4751
for (const moduleId in importDurations) {
4852
const { totalTime } = importDurations[moduleId]
49-
if (totalTime >= 500) {
53+
if (totalTime >= thresholds.danger) {
5054
textClass = 'text-red'
5155
break
5256
}
53-
else if (totalTime >= 100) {
57+
else if (totalTime >= thresholds.warn) {
5458
textClass = 'text-orange'
5559
}
5660
}

‎packages/vitest/src/node/cli/cli-config.ts‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -827,12 +827,36 @@ export const cliOptionsConfig: VitestCLIOptions = {
827827
},
828828
subcommands: {
829829
print: {
830-
description: 'Print import breakdown to CLI terminal after tests finish (default: false).',
830+
description: 'When to print import breakdown to CLI terminal. Use `true` to always print, `false` to never print, or `on-warn` to print only when imports exceed the warn threshold (default: false).',
831+
argument: '<boolean|on-warn>',
832+
transform(value) {
833+
if (value === 'on-warn') {
834+
return 'on-warn'
835+
}
836+
return value
837+
},
831838
},
832839
limit: {
833840
description: 'Maximum number of imports to collect and display (default: 0, or 10 if print or UI is enabled).',
834841
argument: '<number>',
835842
},
843+
failOnDanger: {
844+
description: 'Fail the test run if any import exceeds the danger threshold (default: false).',
845+
},
846+
thresholds: {
847+
description: 'Duration thresholds in milliseconds for coloring and warnings.',
848+
argument: '',
849+
subcommands: {
850+
warn: {
851+
description: 'Warning threshold - imports exceeding this are shown in yellow/orange (default: 100).',
852+
argument: '<number>',
853+
},
854+
danger: {
855+
description: 'Danger threshold - imports exceeding this are shown in red (default: 500).',
856+
argument: '<number>',
857+
},
858+
},
859+
},
836860
},
837861
},
838862
viteModuleRunner: {

‎packages/vitest/src/node/config/resolveConfig.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -877,10 +877,17 @@ export function resolveConfig(
877877
}
878878
resolved.experimental.importDurations ??= {} as any
879879
resolved.experimental.importDurations.print ??= false
880+
resolved.experimental.importDurations.failOnDanger ??= false
880881
if (resolved.experimental.importDurations.limit == null) {
881-
const shouldCollect = resolved.experimental.importDurations.print || resolved.ui
882+
const shouldCollect
883+
= resolved.experimental.importDurations.print
884+
|| resolved.experimental.importDurations.failOnDanger
885+
|| resolved.ui
882886
resolved.experimental.importDurations.limit = shouldCollect ? 10 : 0
883887
}
888+
resolved.experimental.importDurations.thresholds ??= {} as any
889+
resolved.experimental.importDurations.thresholds.warn ??= 100
890+
resolved.experimental.importDurations.thresholds.danger ??= 500
884891

885892
return resolved
886893
}

‎packages/vitest/src/node/reporters/base.ts‎

Lines changed: 47 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -607,14 +607,17 @@ export abstract class BaseReporter implements Reporter {
607607
}
608608
}
609609

610-
if (this.ctx.config.experimental.importDurations.print) {
611-
this.printImportsBreakdown()
612-
}
610+
this.reportImportDurations()
613611

614612
this.log()
615613
}
616614

617-
private printImportsBreakdown() {
615+
private reportImportDurations() {
616+
const { print, failOnDanger, thresholds } = this.ctx.config.experimental.importDurations
617+
if (!print && !failOnDanger) {
618+
return
619+
};
620+
618621
const testModules = this.ctx.state.getTestModules()
619622

620623
interface ImportEntry {
@@ -647,6 +650,18 @@ export abstract class BaseReporter implements Reporter {
647650
return
648651
}
649652

653+
const dangerImports = allImports.filter(imp => imp.totalTime >= thresholds.danger)
654+
const warnImports = allImports.filter(imp => imp.totalTime >= thresholds.warn)
655+
const hasDangerImports = dangerImports.length > 0
656+
const hasWarnImports = warnImports.length > 0
657+
658+
// Determine if we should print
659+
const shouldFail = failOnDanger && hasDangerImports
660+
const shouldPrint = (print === true) || (print === 'on-warn' && hasWarnImports) || shouldFail
661+
if (!shouldPrint) {
662+
return
663+
}
664+
650665
const sortedImports = allImports.sort((a, b) => b.totalTime - a.totalTime)
651666
const maxTotalTime = sortedImports[0].totalTime
652667
const limit = this.ctx.config.experimental.importDurations.limit
@@ -657,21 +672,25 @@ export abstract class BaseReporter implements Reporter {
657672
const slowestImport = sortedImports[0]
658673

659674
this.log()
660-
this.log(c.bold('Import Duration Breakdown') + c.dim(` (ordered by Total Time) (Top ${limit})`))
675+
this.log(c.bold('Import Duration Breakdown') + c.dim(` (Top ${limit})`))
676+
this.log()
677+
this.log(c.dim(`${'Module'.padEnd(50)} ${'Self'.padStart(6)} ${'Total'.padStart(6)}`))
661678

662679
// if there are multiple files, it's highly possible that some of them will import the same large file
663680
// we group them to show the distinction between those files more easily
664-
// Import Duration Breakdown (ordered by Total Time) (Top 10)
665-
// .../fields/FieldFile/__tests__/FieldFile.spec.ts self: 7ms total: 1.01s ████████████████████
666-
// ↳ tests/support/components/index.ts self: 0ms total: 861ms █████████████████░░░
667-
// ↳ tests/support/components/renderComponent.ts self: 59ms total: 861ms █████████████████░░░
668-
// ...s__/apps/desktop/form-updater.desktop.spec.ts self: 8ms total: 991ms ████████████████████
669-
// ...sts__/apps/mobile/form-updater.mobile.spec.ts self: 11ms total: 990ms ████████████████████
670-
// shared/components/Form/__tests__/Form.spec.ts self: 5ms total: 988ms ████████████████████
671-
// ↳ tests/support/components/index.ts self: 0ms total: 935ms ███████████████████░
672-
// ↳ tests/support/components/renderComponent.ts self: 61ms total: 935ms ███████████████████░
673-
// ...ditor/features/link/__test__/LinkForm.spec.ts self: 7ms total: 972ms ███████████████████░
674-
// ↳ tests/support/components/renderComponent.ts self: 56ms total: 936ms ███████████████████░
681+
// Import Duration Breakdown (Top 10)
682+
//
683+
// Module Self Total
684+
// .../fields/FieldFile/__tests__/FieldFile.spec.ts 7ms 1.01s ████████████████████
685+
// ↳ tests/support/components/index.ts 0ms 861ms █████████████████░░░
686+
// ↳ tests/support/components/renderComponent.ts 59ms 861ms █████████████████░░░
687+
// ...s__/apps/desktop/form-updater.desktop.spec.ts 8ms 991ms ████████████████████
688+
// ...sts__/apps/mobile/form-updater.mobile.spec.ts 11ms 990ms ████████████████████
689+
// shared/components/Form/__tests__/Form.spec.ts 5ms 988ms ████████████████████
690+
// ↳ tests/support/components/index.ts 0ms 935ms ███████████████████░
691+
// ↳ tests/support/components/renderComponent.ts 61ms 935ms ███████████████████░
692+
// ...ditor/features/link/__test__/LinkForm.spec.ts 7ms 972ms ███████████████████░
693+
// ↳ tests/support/components/renderComponent.ts 56ms 936ms ███████████████████░
675694

676695
const groupedImports = Object.entries(
677696
groupBy(topImports, i => i.testModule.id),
@@ -688,7 +707,7 @@ export abstract class BaseReporter implements Reporter {
688707
const pathDisplay = this.ellipsisPath(imp.importedModuleId, imp.external, groupedImports.length > 1 && index > 0)
689708

690709
this.log(
691-
`${pathDisplay} ${c.dim('self:')} ${this.importDurationTime(imp.selfTime)} ${c.dim('total:')} ${this.importDurationTime(imp.totalTime)} ${bar}`,
710+
`${pathDisplay} ${this.importDurationTime(imp.selfTime)} ${this.importDurationTime(imp.totalTime)} ${bar}`,
692711
)
693712
})
694713
}
@@ -697,10 +716,20 @@ export abstract class BaseReporter implements Reporter {
697716
this.log(c.dim('Total imports: ') + allImports.length)
698717
this.log(c.dim('Slowest import (total-time): ') + formatTime(slowestImport.totalTime))
699718
this.log(c.dim('Total import time (self/total): ') + formatTime(totalSelfTime) + c.dim(' / ') + formatTime(totalTotalTime))
719+
720+
// Fail if danger threshold exceeded
721+
if (shouldFail) {
722+
this.log()
723+
this.ctx.logger.error(
724+
`ERROR: ${dangerImports.length} import(s) exceeded the danger threshold of ${thresholds.danger}ms`,
725+
)
726+
process.exitCode = 1
727+
}
700728
}
701729

702730
private importDurationTime(duration: number) {
703-
const color = duration >= 500 ? c.red : duration >= 100 ? c.yellow : (c: string) => c
731+
const { thresholds } = this.ctx.config.experimental.importDurations
732+
const color = duration >= thresholds.danger ? c.red : duration >= thresholds.warn ? c.yellow : (c: string) => c
704733
return color(formatTime(duration).padStart(6))
705734
}
706735

0 commit comments

Comments
 (0)