In our first two parts on implementing TypeScript in PowerApps, each class we created had its own JavaScript file that was rendered as a web resource for us to upload into PowerApps.

Even testing this out with two entities (contact and account), this is a pain and prone to errors.

To get around this we are going to merge our files together so we are only ever uploading one file into PowerApps.

Using TypeScript

The first way that we can do this is with TypeScript itself, where we specify a file for all content to be merged into (my appropriately named app.js).

It does a great job of throwing all my work together into a nice file that I can easily upload.

Looking at our file, it looks like a straight cute and paste of our code into one file, which isn’t that productive and can leave it feeling quite bloated.

Minify our Output

To make our file smaller, we are going to minify (shrink it) using Terser.

To install Terser, use the following command;

npm install terser -g

After compiling your files, you can then run the following commands to shrink and minify them.

terser webresources/js/dist/app.js -o webresources/js/dist/app.min.js --compress --mangle

When done, you’ll have a file that already has the size of your original file.