PCF being too heavy

Question

I'm working with custom components from component framework and whenever I try to upload the file into CRM it says it's too heavy. I checked and it takes 7MB which is crazy since it shouldn't. I'm using FluentUI and I checked my imports to see if there is anything importing something too big but it doesn't look like it. Anyone could recommend me something that maybe I can found useful in order to check the file size?

I tried using source-map and source-map-explorer but I had an error everytime (the command during build wouldn't generate a json or similar errors).

Answer 1

You have to take care of few things while you are importing FluentUI controls in your index.ts of PCF control.

You should be importing the controls in granular fashion - ie. import only needed controls. Otherwise bundle.js size will be huge like yours. Import the necessary controls using @fluentui/react/lib/… rather than the whole @fluentui/react.

And try building in Release mode instead of Debug. Read more

You can check the out and binfolder contents.