tapable VS terser

Plugin systems are hard to get right and hard to find the right balance.

I was recently poking through Webpack's [tapable](https://github.com/webpack/tapable) which allows pretty immense customization albeit it's a little complex.

What is the best you've come across?

1) tapable package for event-driven architecture 2) terser for minification 3) acorn for AST processing 4) watchpack to watch file changes

If we take a look at the webpack repository on GitHub, we will find files containing the definitions of some of the key classes that handle the compilation process in webpack. Webpack makes use of its Tapable library to expose hooks for events during the bundle creation process. Many of the classes in webpack extend Tapable in order to provide hooks to plugins so that they, too, can access lifecycle events.

These registration points are called Hooks.

Webpack: Tapable

During my intial search i came across some outdated libraries like javascript-obfuscator and uglify-js(as if javascript code can get any uglier, am I right?). Then, I stumbled upon Terser, a modern library that supports ES6.

Example: You've got a main.js file that's as long as a Tolstoy novel. Fix: Use tools like UglifyJS or Terser to minify your code. They'll squeeze out all the unnecessary bits and give you a sleeker, faster-loading file.

They can do it, it is just turned off by default and require more advanced configuration.

https://github.com/terser/terser#cli-mangling-property-names...

Minifying is a common practice for optimizing production code. (for example, using Terser to minify and mangle JavaScript).

Minification: UglifyJS, Terser

Terser is JavaScript compressor that can minified specific method names.

Every release build of React Native uses terser to reduce the size of your JavaScript. And it operation can be omitted for Staging/Beta builds.

A minifier makes your code more compact so that it loads faster. Popular minifiers: Terser, swc.

There are many minifiers such as terser and uglify. But, because minifying also require to parse the JS, it is actually possible to use esbuild and SWC to minify the code. Here's a benchmark of the main minifiers.

This next one will help us reduce final bundle size by minifying the generated code. It's called rollup-plugin-terser and uses terser under the hood to minify the code.