- JavaScript is code written by humans for computers.
And as I've mentioned before,
while we humans need human readable code,
with lots of white space, and indentation,
and comments, computers do not.
For this reason.
When we ship code to the browser, we can optimize that code
for performance by removing all the white space
and comments, and long variable and function names,
and basically rewrite everything
and turn it into highly optimized human unreadable code.
For this, we use code monifiers,
and uglyfires and mangloes called soul,
because of how they rewrite our beautiful code,
into an ugly mangled computer mess.
There are lots of JavaScript magnifiers to choose from,
and all major bunglers, including webpack, rollup, parcel,
et cetera, ship with magnifiers built in.
The two most popular magnifiers are ugliyph JS, and terser.
Though terser has started to pull ahead,
because it produces smaller code and works better.
These monifiers all work the same way.
You input handwritten, beautifully laid out Java script,
and outcomes are dramatically monified
and uglified and mangled version of that code,
in a new file placed somewhere in your production stack.
Both uglify and terser have default settings that work
for most purposes.
And you can also set up advanced configurations
where you can control pretty much every aspect
of how the code should be monified.
Now, let me show you how this works in practice
give you an idea of how to get started.
If you're working in a project
that is not using a JavaScript bundler,
you can slot one of these monifiers
or mangoloes into your process anywhere you like.
So in this example, I've set up a very
straightforward gold file that uses gold to run the process.
And then I've slotted in terser to minify my JS.
Nothing else that's happening is just to
show you exactly how this works.
What I wanted to do here is grab all the JavaScript files
from the source folder and the JS folder under there,
and then run a through P terser
and place it into my build folder.
So right now my build folder JS has nothing in it.
The gold function looks like this.
I grabbed the source.
So that's source JS and then all the JS files.
And I piped them through terser.
I haven't done any customizations to how terser works.
I'm just using it in its default settings.
And then the resulting file gets piped
into the build JS folder over here.
To run this I opened my command line and say gulp JS
just to run the JS function.
Now each of the JavaScript files are run
through terser and outcomes, the same files up here,
but now they're in the build folder.
I'll just show you, I'm not cheating.
Let's look at the files here.
So I'll grab advanced JS.
That's the relatively large JavaScript file.
You'll see When we look at it, there's a lot
of formatting, and indentation, and white space,
and a lot of long names, and things that are happening.
Now, let's look at advanced JS
after it's gone through terser.
The entire file is now on one line,
and you'll notice some weird things.
The export module name remains the same
because we were using it as a module
and we need to grab that module and use it elsewhere.
And tesser is smart enough to figure that out.
So it's like, I'm not going to change this module name
because it's being exported and will be used elsewhere.
But, all the other variable and function,
names have been changed.
So if I scroll in here, you should see,
let's see, here we have a variable called L.
If we look at the original file, over here,
there's nothing called L.
And you can see that even more extremely,
if we go into let's see module JS,
see here, constant N.
So what happens now is teaser will take anything
it can shorten like long variable names
or function names or anything else, and reduce them down
to the smallest possible thing, which is a single character.
Which makes the function pretty
much unreadable to us humans.
But at the same time, it makes the function much
much smaller for the computer.
That means smaller file size,
and also faster execution times.
That's the whole point.
So if you're using a bungler of any kind,
roll up, webpack something else it'll automatically minify
and mangle your JS for you.
If you're setting up your own custom build process
and you're not using a Bungler,
make sure to add terser or uglify,
although I've would suggest using Teaser
into your build process,
so that all of your JavaScript is compressed
and mangled as much as possible
to make it as small as possible
because that gives you better performance.