Loading a 3rd party dependency via a CDN in a PCF React control

[PMac23]

I am using a large (almost 4mb) and complex 3rd party component in a PCF React control I am developing.

Unfortunately this when bundled makes the produced web resource exceed the default limit in Dynamics 365.

I am looking for a working example of a PCF control that loads a dependency via a CDN or splits the bundle.

[Magesoe]

You can increase the limit by increasing the attachment size in the system settings for the environment

[PMac23]

Unfortunately this would only take me so far, as the prod build bombs out at 5mb.

Secondly as our PCF control is part of a product that is deployed to numerous other customer environments. We are reluctant to adjust these settings.

[Goutham]

@PMac23 

Did you try the following command , setting buildmode to production. this would minify the content in web resource file and might probably reduce the overall size. this worked for me 🙂

dotnet msbuild   /p:pcfbuildmode=production  -restore -target:Build -property:Configuration=Release

 and then 

pac pcf push

[a33ik]

Hello,

There are 2 easy tricks you can use to drop the size of your control - https://butenko.pro/2020/12/06/pcf-2-tips-to-minify-the-size-of-your-pcf-components-up-to-15-times-s...

[PMac23]

I have already done this as I am using Fluent UI as well.

My problem is another complex library which when minified is about 4mb so far, which is sending the bundle size over the edge. That is just with the components I need... and will no doubt get bigger as I use more of their components.

On a related issue I have 5-10 pcf controls on some forms all using Fluent UI. It would be nice if they could all share the same library from a CDN.

[OOlashyn]

Hi @PMac23 ,

Well, you can add thrid-party js library by adding the next code to init function:

const yourScript = document.createElement('script');
yourScript.src='<LIBRARI_URL>';
document.body.appendChild(yourScript);

Just make sure that you are not using the code of this library immediately in the init function as it might not be loaded yet. This is not the best approach but it works - I used it in one of my earlier components.

[PMac23]

Thanks OOlashyn,

I have a way to actually load the scripts from the cdn using a similar approach.

The part I am struggling with is excluding it from the webpack package (tried externals) and still having the bundle use the react components from the cdn libary. I tried even using some undocumented feature flags in pcf-scripts (pcfAllowCustomWebpack and even pcfAllowLibraryResources).

[RishiBhutani]

@PMac23 I would need some info here were you successful with making a pcf control loaded from cdn and manage the package size as well..?

I need some details or pointer to on how you loaded the cdn control at pcf..?