griffel
griffel copied to clipboard
babel-preset: huge perf slowdown on first babel transform invoction
Repro
- checkout/pull https://github.com/Hotell/fluentui/tree/perf/repro/griffel-babel-plugin
-
yarn
-
yarn lage build --to react-combobox
-
yarn workspace @fluentui/react-combobox
just-scripts swc:compile`
Perf report
It seems that first file transform takes serious performance hit ( it doesn't matter much how many/big makeStyles
calls are present in the source file
🐌 91% Slowdown
- With griffel plugin: 1556ms
- Without: 128ms
More detailed report:
With griffel plugin
transform:lib/components/Combobox/useComboboxStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 2107.136041879654,
duration: 1112.6963331699371,
detail: null
}
transform:lib/components/Dropdown/useDropdownStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 3223.4872920513153,
duration: 234.26958298683167,
detail: null
}
transform:lib/components/Listbox/useListboxStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 3462.451292037964,
duration: 17.903625011444092,
detail: null
}
transform:lib/components/Option/useOptionStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 3481.75075006485,
duration: 126.34291696548462,
detail: null
}
transform:lib/components/OptionGroup/useOptionGroupStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 3611.630917072296,
duration: 41.18262481689453,
detail: null
}
PerformanceMeasure {
name: 'babel-loop',
entryType: 'measure',
startTime: 2106.3337919712067,
duration: 1556.8601250648499,
detail: null
}
Without
transform:lib/components/Combobox/useComboboxStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 2519.6634590625763,
duration: 91.24920797348022,
detail: null
}
transform:lib/components/Dropdown/useDropdownStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 2612.96950006485,
duration: 12.754791975021362,
detail: null
}
transform:lib/components/Listbox/useListboxStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 2632.2044999599457,
duration: 2.8975839614868164,
detail: null
}
transform:lib/components/Option/useOptionStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 2636.846209049225,
duration: 5.132250070571899,
detail: null
}
transform:lib/components/OptionGroup/useOptionGroupStyles.styles.js:
PerformanceMeasure {
name: 'babel-transform',
entryType: 'measure',
startTime: 2643.8133749961853,
duration: 2.6310839653015137,
detail: null
}
PerformanceMeasure {
name: 'babel-loop',
entryType: 'measure',
startTime: 2518.9735000133514,
duration: 128.8410840034485,
detail: null
}