FluentUI granular imports

Microsoft FluentUI (the ex Office UI Fabric) is often used to develop PCF components, since the controls have a very similar look and feel with the out of the box controls. But take care how you import it in your modules!

Some examples in the documentation are importing the controls like this:

Of course, there shouldn’t be ‘office-ui-fabric-react’ but ‘@fluentui/react’. The re-branding is not reflected everywhere, but that’s not the point.

Importing like this, without specifying which control inside the library should be used, will result in a huge bundle size.

The import should be granular, and limited only to the needed controls.

If you let VSCode feature “Quick Fix” solve the imports for you, take care to import the “/lib/Control” one

Sometimes you don’t get this proposals

and the intellisense helps you only if you type “/” behind “@fluentui/react/”

Why is that important?

I’ve made some checks on the resulted bundle size. In my case I have a DetailsList control with some satellite controls. It is enough if one of the controls is not imported granular, the bundle size is already inflated. You might get slightly different size, but the size ratio is important.

Importing only the needed controls ‘@fluentui/react/lib/…’

SizeSolution.zipbundle.js
Release160 KB576 KB
Debug502 KB2705 KB

Importing directly from ‘@fluentui/react’

SizeSolution.zipbundle.js
Release322 KB1301 KB
Debug818 KB5041 KB

Even bundled as “release”, the size is more than double as it could have been.

Notice the size of bundle.js bundled for debugging when it’s not granular imported (purple text). It’s almost 5 MB. If you have just a bit more dependencies than me, the size of the bundle.js will exceed 5120 KB, which means that you won’t be able to use

pac pcf push

in order to upload your bundle, since the size of the “debug-bundle” exceeds the max attachment size (so you would probably have to increase that in order to debug your PCF).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑