--- source_url: https://itmustbecode.com/the-pcf-control-framework-chooses-esbuild-loader-for-faster-build-time/ title: The PCF Control Framework chooses Esbuild-Loader for Faster Build Time date: 2022-10-10T13:45:03+00:00 categories: - blog tags: - esbuild - pcf - webpack word_count: 778 reading_time_minutes: 4 type: posts --- While I was starting a new PowerApps Component Framework ( **PCF**) project, I stumbled upon the latest release notes of the framework's main package ( **[pcf-scripts](https://www.npmjs.com/package/pcf-scripts)** v1.18.4). I was stoked 🤩 to see that they **improved** the performance of the **bundling** process by switching from **[babel-loader](https://babeljs.io/)** to [**esbuild-loader**](https://github.com/privatenumber/esbuild-loader). {{< figure src="./image-11.png" alt="" caption="" >}} Let's take this opportunity to nerd-out on the **bundling** process of a PCF control and see if this change really **measures up** ⌚. ## **PCF control Bundling** As a quick recap, it's important to know that the PCF control framework uses **[webpack](https://webpack.js.org/)** to create the bundle ( **bundle.js**), which is nothing more than the **deployable artifact** produced from the source code files and other dependencies (i.e. referenced packages, images etc.). I have blogged in the past on webpack and the PCF control framework 👉[PCF controls – Custom Webpack configurations](/pcf-controls-custom-webpack-configurations/) 👉[PCF Controls – Useful Webpack Plugins](/pcf-controls-useful-webpack-plugins/) Since the advent of the PCF controls a couple of years ago, the frameworks webpack configuration was using **babel-loader** and **ts-loader** webpack plugins as javascript and typescript file bundlers. The **webpack configuration** can be found in the **node\_modules\\pcf-scripts\\webpackConfig.js** file of the project. Here i'm showing an older version of the file (v1.16.6). {{< figure src="./image-13.png" alt="" caption="" >}} ## **Enters Esbuild** As their official tagline says, Esbuild is **an extremely fast javascript bundler**. It's a next-gen bundler written in **Go** language with performance in mind. It can be used as a replacement for **webpack** and the numbers they show on performance gain compared to old-school bundlers are astonishing... we are talking about 10 to 100 fold. Here are some interesting reads on the subject 👉[esbuild - An extremely fast JavaScript bundler](https://esbuild.github.io/) 👉[privatenumber/esbuild-loader: ⚡️ Speed up your Webpack build with esbuild (github.com)](https://github.com/privatenumber/esbuild-loader) 👉[webpack or esbuild: Why not both? - LogRocket Blog](https://blog.logrocket.com/webpack-or-esbuild-why-not-both/) On the other hand, if you still want to use **webpack**, you can make use of the **[esbuild-loader](https://github.com/privatenumber/esbuild-loader)** plugin for webpack. This let's you take advantage of the speed of **esbuild** inside a **webpack** build process. That's exactly what they did with the latest version of the **pcf-scripts** package (v1.18.4). If we look at the new and improved **webpackConfig.js** file, we can see that the javascript and typescript **bundling** as been delegated to **esbuild-loader** as well as the **minification** of the bundle. {{< figure src="./image-14.png" alt="" caption="" >}} ## **Measuring up** To measure up the build time, I'm making use of a webpack plugin called [**Speed Measure Plugin**](https://github.com/stephencookdev/speed-measure-webpack-plugin), this will gives nice looking output and statistics on the build process. _see my previous [blog post](/pcf-controls-useful-webpack-plugins/) to see how to configure this._ I will use one of my community PCF project, [LookupDropdown.PCF](https://github.com/drivardxrm/LookupDropdown.PCF), to do the test. Let's start with the old version of **pcf-scripts** (v1.16.6). We can see that the build time is in the 10 seconds range with the **babel-loader** steps sucking up most of the build time. {{< figure src="./image-7.png" alt="" caption="" >}} {{< figure src="./image-6.png" alt="" caption="" >}} Now by simply changing the **pcf-scripts** package to the latest version (1.18.4) and rebuilding the project. Tada...we can appreciate a significative drop in the build time with the **esbuild-loader** steps taking no more than 2 seconds. That's a **125%** build time improvement... **Fantastic**!. {{< figure src="./image-8.png" alt="" caption="" >}} {{< figure src="./image-10.png" alt="" caption="" >}} ## **Takeaway** From now on, I will make sure to use the latest **pcf-scripts** version in my future PCF control projects and upgrade my older ones. Kudos 👏 to the Microsoft Product team for keeping the PCF framework **up to date** with this kind of investment. Reducing the build time have a direct **positive impact** on the **development experience**. As a side note..🤔I'm very **curious** about the 2nd statement in the release notes about **objectType** and **propertyDependencies**. As I can't find any official documentation on that feature yet... lets keep that for a future blog post. {{< figure src="./image-15.png" alt="" caption="" >}} ## **Links** {{< linkcard url="https://www.npmjs.com/package/pcf-scripts" title="pcf-scripts" summary="This package contains a module for building PowerApps Component Framework (PCF) controls. See project homepage how to install.. Latest version: 1.18.4, last published: 22 days ago. Start using pcf-scripts in your project by running `npm i pcf-scripts`. There are no other projects in the npm registry…" image="/linkcards/b45ab5f42375fd92.png" domain="www.npmjs.com" new_tab="true" nofollow="true" >}} {{< linkcard url="https://github.com/privatenumber/esbuild-loader" title="GitHub - privatenumber/esbuild-loader: ⚡️ Speed up your Webpack build with esbuild" summary="⚡️ Speed up your Webpack build with esbuild. Contribute to privatenumber/esbuild-loader development by creating an account on GitHub." image="/linkcards/45ac5c56c3b5ce5e.png" domain="github.com" new_tab="true" nofollow="true" >}} {{< linkcard url="https://babeljs.io/" title="Babel · The compiler for next generation JavaScript" summary="The compiler for next generation JavaScript" image="/linkcards/c0fe64902fb49c7d.png" domain="babeljs.io" new_tab="true" nofollow="true" >}} {{< linkcard url="/pcf-controls-custom-webpack-configurations/" title="PCF controls - Custom Webpack configurations" summary="Provide your own custom Webpack configurations to a Power Apps Component Framework control." image="./pexels-karolina-grabowska-4498124.jpg" domain="itmustbecode.com" new_tab="false" nofollow="false" >}} {{< linkcard url="/pcf-controls-useful-webpack-plugins/" title="PCF Controls - Useful Webpack Plugins" summary="Enhance the PCF control development experience with the use of Webpack plugins." image="./AdobeStock_245503753.jpeg" domain="itmustbecode.com" new_tab="false" nofollow="false" >}} {{< linkcard url="https://dev.to/zaydek/what-is-esbuild-2ofc" title="What is esbuild?" summary="Table of contents JavaScript’s dirty little secret ES Modules Introducing esbuild Bundling Plugins..." image="https://res.cloudinary.com/practicaldev/image/fetch/s--peurOy-I--/c_imagga_scale,f_auto,fl_progressive,h_500,q_auto,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o507vjmtzq70ta0umgfm.png" domain="dev.to" new_tab="true" nofollow="true" >}} {{< linkcard url="https://blog.logrocket.com/webpack-or-esbuild-why-not-both/" title="webpack or esbuild: Why not both? - LogRocket Blog" summary="esbuild makes builds faster, but if you’re invested in webpack, esbuild-loader enables you to use esbuild alongside webpack." image="/linkcards/729b76fbdfcc2d05.png" domain="blog.logrocket.com" new_tab="true" nofollow="true" >}} Photo by [Tim Trad](https://unsplash.com/@timtrad?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/s/photos/racecar-finish?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)