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/…’
|Release||160 KB||576 KB|
|Debug||502 KB||2705 KB|
Importing directly from ‘@fluentui/react’
|Release||322 KB||1301 KB|
|Debug||818 KB||5041 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).