This repo is a small benchmark to compare the status quo of Fluent v9 preprocessing Griffel styles with a proposal to stop shipping pre-processed styles.
Tests are run with Tensile, a stress test benchmarking tool.
There are two test categories:
- "with style processing": the way Fluent is currently shipped with Griffel AOT. This is the baseline case.
- "no processing": a patched version of Fluent that disables Griffel AOT.
Components are imported directly from their packages rather than from the Fluent suite package. E.g.:
// import this way
import { Button } from '@fluentui/react-button';
// rather than
import { Button } from '@fluentui/react-components';
Packages are aliased for the "with style processing" case with @fluentui/react-button
being aliased to react-button
and so forth.
Pacakges are patched for the "no processing" case to eliminate the AOT step in the build.
- Clone this repo
- Install deps:
yarn
(this will handle aliasing and apply patches for you)
View the scripts
block in package.json
for the test cases.
- Test cases prefixed with
bench:
are "with style processing" - Test cases prefixed with
bench-no-process:
are "no processing"
Results are written to the .tensile/results
folder in the JSON file named for the test. The processedMeasurments
node rolls up the various measurements.