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
PA_User Group Leader_768x460.jpg

Manage your user group events

Check out the News & Announcements to learn more.

Power Query PA Forum 768x460.png

Check it out!

Did you know that you can visit the Power Query Forum in Power BI and now Power Apps

Carousel 2021 Release Wave 2 Plan 768x460.jpg

2021 Release Wave 2 Plan

Power Platform release plan for the 2021 release wave 2 describes all new features releasing from October 2021 through March 2022.

PowerPlatform 768x460.png

Microsoft Learn

Check out our new Discover Your Career Path blog post series and get all the details.

Users online (1,054)