Hacker News new | ask | show | jobs
by Klathmon 3369 days ago
One massive thing minifying does is dead code elimination (slightly less applicable to CSS but it still applies using some build stacks)

We can build a "prod" version of the app and the minifying process will drop all the debugging code as well as any unused or uncalled functions from the output.

1 comments

What JS Minifier do you know that does dead code elimination?

I would have thought that understanding what functions of a dynamic language that can be safely removed would require parsing/AST analysis beyond those found in the typical minifier.

I use uglifyjs and it does a pretty good job of it.

We use blocks like this throughout our codebase:

    if (process.env.NODE_ENV === 'development') {
      fancyDebuggingFunction(stuff)
    }
    // ... some code later
    fancyDebuggingFunction(var) {
      /* do debugging things here */
    }
And when combined with some stuff that sets the process.env.NODE_ENV (not sure how that part works honestly, never really looked into it) it will remove not only the if statement, but also the function if it's not called anywhere and not exported.

Throw in Webpack 2's import/export bundling stuff, you can exclude whole modules which you don't use in production which can really reduce the size of your code.

And moving forward if the JS ecosystem can ever get a handle on a good way to move to import/export by default, you'll start seeing massive gains in this area by being able to strip out any parts of a library that you don't use.

Also, I believe most widely used minifiers use AST parsing to do their work.

Closure compiler, while trickier to use than the other options, will do dead code elimination, constant propagation, and other classic whole-program optimizations.
I don't know about the typical minifier, but most of the popular ones (uglifyJS, closure etc.) work by first building an AST and then analyzing that.
The dojo build system (as clunky as it is) has supported dead code elimination at the module level though dependency analysis for a long time.
Rollup (and relatives) even do tree shaking if you use ES2015 Modules. (Those modules have a static-analysis friendly set of requirements.)
Webpack, rollup, closure compiler + uglify. In JS land it's commonly called "tree shaking".