About a month ago I joined the project where my main duty is the development of PCF components. I was soooo waiting for such a project to polish my skills and extend the knowledge I got building PCF components for fun. Let me move closer to the subject. I was working on the component that allowed to show the PDF document inline in the model-driven app form and add different elements to it. I used ‘React’ and ‘FluentUI’ frameworks to display various controls. During development, everything was working fine but suddenly when I tried to push the component to CDS I got the message that it can’t be imported because the ‘bundle.js’ file (it’s the file that contains all of the code of the component) is too big. Using 2 tricks I provide in this post I was able to make the size of the bundle.js file 10 times smaller.

If you’re a visual person I prepared a video with tips on my YouTube channel and you can check it there. If you liked it, don’t forget to hit the ‘like’ button under the video and subscribe to my channel because some content I post on YouTube is not available in my blog and vice versa.

Video

If you’re the reading person then the content after this paragraph is for you:

Scenario

As an example for this post I use the component I demonstrated in one of my previous posts. Here is what is given:

• PCF Component
• React and FluentUI used to render UI controls of the component

Here is the initial code of the component (to be specific this is the part that is used to render the UI):

import * as React from 'react';
import { PrimaryButton, Stack } from '@fluentui/react';

export interface ICustomButtonProps{
	label: string;
	clickHandler: () => void;
}

export class CustomButton extends React.Component<ICustomButtonProps, {}> {
	render(){
		return (<>
			<Stack>
				<PrimaryButton 
					text={this.props.label}
					onClick={this.props.clickHandler}
				/>
			</Stack>
			</>);
	}	
}

The following screenshot demonstrates the initial size of bundle.js file – the file that contains all the code of component – 5227kb:

Tip 1 – use only what is needed

In the component’s code I used import {…} from ‘@fluentui/react’; and it blew up the size of the bundle.js because even component uses only PrimaryButton and Stack controls all components of FluentUI are brought to the resulting file. To use only pieces that are really needed I changed the ‘import’ line to the following:

import { PrimaryButton } from '@fluentui/react/lib/Button';
import { Stack } from '@fluentui/react/lib/Stack';

Here is the result after the component was rebuilt:

As you can see file lost 3 megs already and became 2.3 times smaller.

All credits for this tip go to Artem Grunin because he was the person who first recommended me to use this approach to shrink the size of the component.

Tip 2 – use production mode

I knew it was possible to build the component in ‘production’ (i.e. minified) mode using the long routing through a solution that is described in this article but after the PowerApps CLI team introduced pac pcf push command I stopped to use solutions with PCF Components and was looking for a way to use ‘production’ mode with pac pcf push command.

All credits for this tip go to my colleague Jeff Klosinski who forwarded me this article. So here is the tip:

When the control is ready and you want to push it to the CDS environment open *.pcfproj file and look for the following part of the file:

<PropertyGroup>
  <Name>Your PCF Control Name Here</Name>
  <ProjectGuid>Some Guid Here</ProjectGuid>
  <OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
</PropertyGroup>

Add the line <PcfBuildMode>production</PcfBuildMode> to turn it to:

<PropertyGroup>
  <Name>Your PCF Control Name Here</Name>
  <ProjectGuid>Some Guid Here</ProjectGuid>
  <OutputPath>$(MSBuildThisFileDirectory)out\controls</OutputPath>
  <PcfBuildMode>production</PcfBuildMode>
</PropertyGroup>

Save the file and use pac pcf push command to import your component to CDS. So here is what happened to the size of bundle.js:

Conclusions

I’m doing some math here – 5227(initial size) divided by 349(size after both tips applied) equals 14.977 which means that bundle.js became almost 15 times smaller compared to the initial state. Usage of tips made the size of bundle.js 15 times smaller in the case of my example but there is no guarantee that you will have the same numbers but for sure usage of these tips should shrink the size of the resulting bundle.js file.