---
source_url: https://itmustbecode.com/pcf-controls-useful-webpack-plugins/
title: PCF Controls - Useful Webpack Plugins
date: 2021-11-16T04:58:31+00:00
categories:
  - blog
tags:
  - dataverse
  - pcf
  - webpack
word_count: 1185
reading_time_minutes: 6
type: posts
---

In my last post I explained how to enable **custom webpack configurations** in a **PowerApps Control Framework** project. I also showed how to generate the **source-map** file of the generated PCF bundle.

> [PCF controls – Custom Webpack configurations](/pcf-controls-custom-webpack-configurations/)

To continue on this track and push things a little further, I want to explore how to enhance the PCF development experience with the use of **webpack plugins** that can be referenced in the custom configuration file.

Altough there are tons of webpack plugins available (see links at the bottom) I will focus on 4 plugins that will help :

- ⌚ Measure up the build time
- 👁️ Get insight on the bundle composition and size
- 🏃‍♂️ Build your project faster
- 🧹 Cleanup the stage between each build.

### **What are Webpack Plugins**

Before we dive deeper on the matter, remember that **webpack** is the **bundler** that is used by the PCF framework to create the deployable artifacts (bundle.js) out of the source code and other dependencies like referenced npm packages.

{{< figure src="https://th.bing.com/th/id/R.146b04c7361a9d89d543cb219df77bb8?rik=ZDBS00HmD7UpBg&riu=http%3a%2f%2ftlog.tammolo.com%2fstatic%2fwebpack-146b04c7361a9d89d543cb219df77bb8.png&ehk=brt9CCWPXVAHaFyMEfrJ0nPIuh9PUqM9%2biTx5B96Tbw%3d&risl=&pid=ImgRaw&r=0" alt="See the source image" caption="See the source image" >}}

By definition, a **webpack plugin** is a piece of code that as access and can interact with the whole webpack compilation events and objects.

As stated in the official [Webpack documention](https://webpack.js.org/concepts/plugins/), Plugins are the backbone of webpack and most of webpack itself is architectured around plugins.

### **Webpack Plugin in a PCF project**

To make use of webpack plugins in a PCF project, just import and reference them in a custom configuration file **webpack.config.js** (see my [previous post](/pcf-controls-custom-webpack-configurations/) for more context)

At this point, I assume that you have enabled the **pcfAllowCustomWebpack** feature flag by adding a **featureconfig.json** file at the root of your projet

To add plugins to your configuration, just add a ' **plugin**' node inside the **module.exports** of the **webpack.config.js** at the root of the project. _This is where the plugins code will be added in the next sections_

> At build time, this file gets merged with the out of the box webpack configuration of the PCF framework (located at **node\_modules\\pcf-scripts\\webpackConfig.js**)

### ⌚ **Speed Measure Webpack Plugin**

[https://github.com/stephencookdev/speed-measure-webpack-plugin](https://github.com/stephencookdev/speed-measure-webpack-plugin)

The first plugin I want to show is **Speed Measure Webpack Plugin**. By enabling this plugin, you'll be able to get valuable insight on the time it takes for every step of the build process to complete. This will help later on to demonstrate the usage of other plugins.

Install the npm package and add the following code to the **webpack.config.js** file

```
npm install --save-dev speed-measure-webpack-plugin
```

Notice that this plugin is a bit different from the others as you don't put the code inside the plugin node but instead you are wrapping all the content of the module.exports with the plugin instance ( **smp.wrap()**)

Now when you build the project, there will be a new section in the output log where you can see the statistics of each loaders and plugin involved in the bundling of your component. Pretty slick 🤓 eh.

{{< figure src="./image-2.png" alt="" caption="" >}}

### 👁️ **Webpack Vizualizer**

- [https://github.com/chrisbateman/webpack-visualizer](https://github.com/chrisbateman/webpack-visualizer)

The **Webpack Visualizer** plugin can help get a clear picture of the bundle composition.

This plugin will generate a webpage out of the **statistics** gathered by the webpack compilation process. You'll be able to see all the packages referenced in the project and their respective size. This can be very useful to assess if a specific library is bloating the bundle or to spot duplicated libraries.

Just install the npm package and add the following code to the **webpack.config.js** file

```
npm install --save-dev webpack-visualizer-plugin
```

When the project is built, notice a new file called **stats.html** in the build folder.

{{< figure src="./image-1.png" alt="" caption="" >}}

Open the file and a nice interactive chart that expresses the packages sizes contained in the bundle will be shown. For example, here FluentUI accounts for 49% of my control composition.

{{< figure src="./image.png" alt="" caption="" >}}

As a side note, you might want to comment out this plugin code before building your deployable solution as it will put the **stats.html** file in your solution .zip file ( _more on that later_). You can also change the output folder in the options of the plugin, just look at the documentation.

There are other very intersting plugins for bundle statistics and visualization like [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) I encourage you to have look and find the one that best suits your needs.

### 🏃‍♂️ **Hard Source Webpack Plugin**

- [https://github.com/mzgoddard/hard-source-webpack-plugin](https://github.com/mzgoddard/hard-source-webpack-plugin)

This one is very interesting as it will cache some info about the build process and significally speedup the build time.

Again, install the npm package and insert the plugin code in your **webpack.config.js** file

```
npm install --save-dev hard-source-webpack-plugin
```

Here's where it gets interesting. Once this plugin is enabled, the first time you build the project you will see no difference in build time, but some of the heavy lifting stuff will be cached on disk.

If you look at the output below, you see that a cache is being created. ( _We can see the SMP plugin shown earlier in action that measures the processing time of the hard source plugin_)

{{< figure src="./image-4.png" alt="" caption="" >}}

Now if you rebuild the project **without doing any changes** you'll see that the build time dropped drastically because the data on cache was used.

{{< figure src="./image-5.png" alt="" caption="" >}}

I know this doesn't prove nothing since there where no changes to the source code, so here I made changes to 3 typescript files in the project and rebuilt. here's the results

{{< figure src="./image-6.png" alt="" caption="" >}}

You can appreciate that the build time is now more than half of the initial build time (3.76 sec vs 8.86). I agree that this can be insignificant for small projects, but it can be really useful for big PCF projects.

### 🧹 **Clean Webpack Plugin**

- [https://github.com/johnagan/clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin)

Last but not the least, **Clean Weppack Plugin** will help to **clean up** the **output folder** at every succesful build.

By default, the **out** folder doesn't get sweeped between each build, so if like me you experiment a lot with plugins and source-map files, you can end up with unwanted files in the output directory.

Now even if for instance, you comment out the lines in your webpack configuration that generates extra files (ex. source-map, stats.html), you can see below that the build started at 10:32 PM **only overwrited** the files generated by the current build and left the 3 unwanted files in the directory.

{{< figure src="./image-7.png" alt="" caption="" >}}

Even worse 😒, these unwanted files will be included in the generated solution packages and deployed into your Dataverse Environments, as you can see in the extracted zip file below

{{< figure src="./image-8.png" alt="" caption="" >}}

To rectify this situation, just install the npm package and insert the plugin code in your **webpack.config.js** file

```
npm install --save-dev clean-webpack-plugin
```

From now on the build folder will be wiped-out at evey build. As you can see below, the next build of the same project using **CleanWebpackPlugin** will yield only the desired files in the output directory.

{{< figure src="./image-9.png" alt="" caption="" >}}

### **Conclusion**

If we mix all these together, my custom webpack configuration would look something like this. It's very easy to comment lines as needed when functionalities are not needed (ex. source-map and Visualizer)

Hopefully this will give you some ideas on how to improve your PCF development experience. Above all, I really feel like I have just scratch the surface here.

Here's some interesting ressources to find more plugins and use cases.

- [https://webpack.js.org/plugins/](https://webpack.js.org/plugins/)
- [https://awesomeopensource.com/projects/webpack-plugin](https://awesomeopensource.com/projects/webpack-plugin)