Library

React Components / v9 (@fluentui/react-components)

System Info

n/a

Are you reporting Accessibility issue?

no

Reproduction

Import FluentProvider and render it in a blank app.

Bug Description

Actual Behavior

All of @fluentui/react-icons is parsed at minimum, and downloaded if you use a bundler that loads packages independently (like Cloudpack.)

This is due to a single line of code:

import { IconDirectionContextProvider } from '@fluentui/react-icons';

This results in a big dent in development loop performance, and in the Cloudpack case, the most vanilla page renders 500ms slower.

Expected Behavior

Loading the FluentProvider should not add more than a couple milliseconds to the page load.

This is how:

Create an independent entry-point for the non-icon code, and add it to the exports map. Then change the fluent provider code to use that entry point, rather than asking the tooling to loading every possible icon and then figuring out you only want the provider.

In other words, change this line of code in the FluentProvider render to this:

import { IconDirectionContextProvider } from '@fluentui/react-icons/providers';

Note: the /providers path in the import!

In the react-icons package.json, document the ./providers entry:

"exports": {
   // etc

   "./providers": {
     "types": "./lib/providers.d.ts",
     "import": "./lib/providers.js",
     "require": "./lib-commonjs/providers.js"
   }
}

...and add ./src/providers.ts to export just providers:

export { IconDirectionContextProvider } from './IconDirectionContextProvider';
// etc

Now when a dev loads up fluent provider, no huge perf penalty. Much better initial experience!

One other note: there are many packages in fluent ui that import @fluentui/react-icons. These are going to cause the same issue. We should consider a couple of additional entries for these:

• ./common-icons - this should export all icons fluent components generally need. Chevrons, Add, upload, plus/minus, share, etc.
• ./extended-icons - dumping ground for everything else

Once these are there, we scrub the entire repo and only import from ./common-icons. Partners can get extended icons from ./extended-icons. Or, even better, break that into 3 or 4 more logical groupings to give partners more ways to import what they need than only the "everything" option.

Logs

n/a

Requested priority

Normal

Products/sites affected

office

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.