Minify frontend builds

[avaer]

The for site, we use JSM modules for loading frontend code without any minification or build step.

We could probably save some load time and request splay if we ran a Github Actions workflow to run a minification pass (perhaps with parcel). Supporting source maps so that this is debuggable is probably a requirement.

[ChristopherTrimboli]

Taking this ticket.

[ChristopherTrimboli]

Giving this a go with: https://github.com/mishoo/UglifyJS Seems to be a solid choice for minification + supports source maps. Can be run in package.json script at build / deploy time.

[avaer]

I would compare results across the different tools. I think parcel uses uglify?

[avaer]

The end goal is to have one minified source mapped file as the xrpackage-site frontend.

[ChristopherTrimboli]

Actually, I think we would like this better... https://www.npmjs.com/package/terser They are rollup fans, uglify apparently does not support es6, and they have more latest features with less deprecated deps.

[ChristopherTrimboli]

On further learning... I think just going to use https://rollupjs.org/guide/en/ and roll it all up. 🤔

[avaer]

Why not parcel?

[ChristopherTrimboli]

Well... Webpack, Parcel and Rollup would all work for us.

Webpack is actually the most feature full and stable build system.

Parcel and Rollup make slightly smaller / faster builds but missing some key features webpack has support for in tree shaking and code splitting... so may in fact be worse.

Webpack also has more support and config for plugins and other build options. It's very extensible for anything we want to do custom.

My vote now is Webpack. Because I've used it 100 times and I know it will work good for what we want here, but I'm open to using something else.

[ChristopherTrimboli]

I read these combined with my own opinion / experiences: https://medium.com/better-programming/reducing-js-bundle-size-a6533c183296 https://medium.com/js-imaginea/comparing-bundlers-webpack-rollup-parcel-f8f5dc609cfd

[ChristopherTrimboli]

Another brownie point, the introduction of a Build system provides access for React to come into the Frontend easier along side the vanilla HTML / JS. For that... I also recommend Webpack for bringing React / Typescript / SASS / LESS support to the app.

[avaer]

Let's not conflate issues here. The point is a smaller and faster load, with a secondary eye to fast building.

I'm open to getting the numbers and seeing what's best though.

[ChristopherTrimboli]

Ok, for the fun of it... I'm going to run all three builds... find out what is easiest to use, fastest and best bundle sizes. Then report back with numbers and metrics. For science 🔬.

[ChristopherTrimboli]

I support Parcel now. They all can bundle everything we want. I like the speed and the fact Parcel has most of the config auto-magic and don't need to setup as many config. I reviewed docs... I can do everything we want in Parcel including the React stuff.