react-nav: Improve tree shaking by moving token exports out of styles file #35207
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
📊 Bundle size report
Unchanged fixtures
|
|
Pull request demo site: URL |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| @@ -0,0 +1,7 @@ | |||
| { | |||
There was a problem hiding this comment.
🕵🏾♀️ visual changes to review in the Visual Change Report
vr-tests-react-components/Avatar Converged 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Avatar Converged.badgeMask.normal.chromium.png | 1 | Changed |
vr-tests-react-components/Charts-DonutChart 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Charts-DonutChart.Dynamic - RTL.default.chromium.png | 30793 | Changed |
| vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png | 27053 | Changed |
vr-tests-react-components/Drawer 1 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Drawer.overlay drawer large - Dark Mode.chromium.png | 715 | Changed |
vr-tests-react-components/Positioning 2 screenshots
| Image Name | Diff(in Pixels) | Image Type |
|---|---|---|
| vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png | 932 | Changed |
| vr-tests-react-components/Positioning.Positioning end.chromium.png | 911 | Changed |
CampbellOwen
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Related: https://github.com/microsoft/fluentai/pull/3349
When the
styles.tsfiles are preprocessed by griffel's AoT compilation,navItemTokensbecomes dead code. However, in certain cases it can still cause thetokensimport to be included in the final bundle if webpack can't do module concatenation. This can happen when multiple components from this package are used across separate chunks (e.g. lazy loading one of the components). When this happens, even thoughnavItemTokensitself is removed as dead code, the import oftokenscan still remain as Terser doesn't know aboutsideEffects:falsefrom package.json.This change moves
navItemTokensto a different file. Now when the styles are preprocessed this object is not present in the styles file and is just an import that's unused. Unused imports seem to be much easier for webpack to prune and this makes it more unlikely that these styles will forcetokensto be included in the final bundle.This shouldn't change the bundle size in general, but it should make it easier for downstream apps to not face bloated bundle sizes in certain conditions.