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.
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.
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
pac pcf push
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...
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.
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.
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).
The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.
Join us on June 28 for our monthly User Group leader call!
This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.
Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.