Breaking is not building. Or devolution

Recently, a couple of interesting articles appeared on Habré. The first was devoted to the problem of minimizing ES6 , the second about general helpful tips optimization webpack .

Everything would be fine, but both of them avoided the question of splitting the bundles into ES6 and ES5 for the purposes of minification and other optimization. And in general, while some people write and write articles about it - others (almost all) ignore this technique.

Because long. Expensive. And not so very much.
')
And you need to quickly, cheaply, and downward. Perhaps you should just reverse the evolution.

Idea

Describing an “idea” is not a good idea. It is better to describe how it should work. How the bundle formation process should work:

• I have a code
• I compile it under my “development” browser
• and it all works.

The development browser is here - so that async / await, generator, classes, arrow functions and so on. In general, target: esmodules in Babel.

I do not know about you, but I like this idea. That's just the old browsers that are still among us, this idea is not so that comes. (and therefore we all sizzle es5 in production, spiced with half a megabyte of polyfiles)

And that is what needs to be fixed.

Devolution

Devolution is a small cli utility that will take your bundle compiled into target: esmodules and degrade it to es5, adding all the necessary polyfiles along the way.

In short, then:

• there are all js scripts
• run through the babel with one active plugin (fork useBuiltins: "usage"), which defines the required polyfiles. This is fast, as there is no transformation.
• for each file, all the polifiles he needs are collected (minus those already in the main bundle), merged, run through the terser and added to the beginning of the file.
• each file is run through the swc, rust version of babel, which de-upgrades the code to a level understandable by IE11. Babel works 10-60 times faster. It does not support various plugins, but it is not necessary - all that is needed __ has been applied.
• terser is again applied to the result, but with the mangle turned off (name compression), which is again fast.
• All this is done in workers.

I ran the code on three projects of different levels of complexity:

• project 1, 60 final js files (code splitting). Build time 400s. Devolution 30s.
• project 2, 1 final js file (30mb). Assembly time 120s. Devolution 10s.
• project 3, 1 final js file (2mb). Assembly time 20s. Devolution 5s (at the start of the workers there is a lot of something and is lost).

The bonus from ESM bundle turned out to be a bit strange:

• one project lost 400kb babel / polyfill. Tritely, nothing was used there “beyond” browser chips, and in “esm” they do not need polyphiling
• one project lost 10% due to much more compact code of generators, async / await and class constructors
• One project has become stouter since the “loose” babel transformations sometimes make the code more compact. But loose mode is a bit of a dangerous option, while the “ES6” code is “safe”.

Again:

• we take ES6 code (more precisely esmodule, let / const will be replaced by var for speed purposes)
• make ES5 out of it
• throwing polyphiles on the side
• scatter on daddies, add symlinks to other files
• we change the connection of scripts to pages for a little smarter (IE11 does not understand modules / nomodules)
• ready - ESM for 85% of customers, ES5 for those who are in the tank.

Simply. Quickly. Just stupid. We de-modernized the bundle. Old browsers! Ay - eat filed.

Well, new browsers will get a bundle with almost no polyfiles, no horrible transformations of generators and async / await, with arrow functions without tambourines (and they are generally faster). In general, everyone is happy, as it was originally intended.

github.com/thekashey/devolution

PS: In fact, at the moment devolution does not use swc , as it sometimes makes the code not very working - github.com/swc-project/swc/issues/280 , Babel is not so much slower - where the swc was being edited in 20 seconds, babel copes in a minute. With the time of “normal” assembly - from 5 onwards - this is a big plus.

PS: If suddenly it became interesting why the devolution is a video here .