cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
PMac23
New Member

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

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.

7 REPLIES 7
Magesoe
Advocate I
Advocate I

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

PMac23
New Member

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.

@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
MVP

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...

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.

----------------------------------------------------
If you find this post helpful consider marking it as a solution to help others find it.
PMac23
New Member

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).

Helpful resources

Announcements
Power Platform Conf 2022 768x460.jpg

Join us for Microsoft Power Platform Conference

The first Microsoft-sponsored Power Platform Conference is coming in September. 100+ speakers, 150+ sessions, and what's new and next for Power Platform.

May UG Leader Call Carousel 768x460.png

June User Group Leader Call

Join us on June 28 for our monthly User Group leader call!

PA Virtual Workshop Carousel 768x460.png

Register for a Free Workshop

This training provides practical hands-on experience in creating Power Apps solutions in a full-day of instructor-led App creation workshop.

PA.JPG

New Release Planning Portal (Preview)

Check out our new release planning portal, an interactive way to plan and prepare for upcoming features in Power Platform.

Users online (1,376)