How to minify/uglify document and window properties and methods

Question

I'm looking for a way to minify a code like this:

setTimeout(function() {
  document.getElementById('test').innerText = 'Hello World!';
}, 1000);

To something like this (minus spaces and new lines):

(function(a,b){
  a(function(){
    b('test').innerText='Hello World!';
  }, 1000);
})(setTimeout, document.getElementById)

using an automatic tool like UglifyJS or similar. From the documentation it doesn't seem to be an option to do that.

EDIT: It's quite common to see code like this:

(function (window, document, undefined) {
  // code here
})(window, document);

This is done for performance and to make the code more minifier-friendly , so I'm wondering why this is not done on a deeper level.

Answer 1

You can use a task runner , or module bundler or command line to this:

• Task Runner
  • Grunt with your plugin .
  • Gulp with your plugin .
• Module Bundler
  • Webpack with your plugin .
• Command Line
  • UglifyJS .

And several other tools.

Answer 2

Using uglify-js (tested it with version 3.14.5 but it shoudl also work with version 2), you can use the --enclose option:

npx uglify-js --mangle --enclose setTimeout,document:setTimeout,document test.js --output test2.js

Giving the following output:

(function(e,t){e(function(){t.getElementById("test").innerText="Hello World!"},1e3)})(setTimeout,document);

Unfortunately it cannot replace expressions like document.getElementById .