PCF control is too heavy?

All of us might have created a PCF control by now or planning to create one soon, typically React components and fluentUI/office-fabric will be included as a part of it. Its unavoidable to do some silly mistakes in initial days as a beginner and facing issues. The one issue is bulky control due to basic overlooking like this issue reported in Stack Overflow.

I faced this myself and learnt it hard way. Later many bloggers documented it and awareness spread.

The trick is to import only the needed controls in index.tx file, instead of importing the whole libraries which we are not even using. You can do it by granular imports.

Normally people do import like the whole office-ui-fabric-react or @fluentui/react. This import the whole contents. But the recommended way is to import only the controls we need by doing like this, this will import only Button related libraries: 

import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button'

Another point is building in release mode instead of debug mode.

These critical steps will save you ton of size in bundle.js and Solution. You can verify the file sizes in out and bin folder contents.

Learning link