JavaScript Minifier

Why minify your JavaScript?

Minifying, or minification, is where you eliminate superfluous characters from your code, whether they may be whitespace (like space), code that isn't at any point utilized, remarks in your code or long names for factors that can be supplanted with something more limited.

Minification of your code brings about it occupying less room, making it quicker to send from a server to a client, as well as involving less data transmission in doing as such. This further develops the client experience on your site as it can stack quicker.

You ought to just minify the code that you are disseminating however, not your source adaptation that you are composing, as minified code is more enthusiastically to peruse and comprehend, making investigating more muddled. Furnishing a source map assists with this, as it maps the minified code back to the first source code, permitting creation mistakes to be planned to the right piece of code in the source variant.

Utilizing Terser in a creation pipeline
There are various choices accessible for minifying your code in a creation work process, for example, uglify-js or minify, however Terser is by all accounts the most famous device presently accessible, as it can deal with both ES5 and ES6 punctuation out of the case.

Terser is accessible on NPM, and can be introduced in your undertaking with npm introduce terser. Alternatively, you can introduce it worldwide on your machine by adding the - g banner to the order, permitting the CLI to be utilized anyplace and the module to be remembered for any undertaking.

Once introduced, there are two primary ways of interfacing with Terser. Possibly, you can utilize the order line interface (CLI) through your terminal/control center, or you can utilize the Terser JavaScript API which considers all the more fine command over how your code is minified.

To minify a document with Terser by means of the CLI, you can run terser my_code.js - - yield my_file.min.js. Pressure and mutilating can be empowered with the - - pack and - - disfigure hails separately. Sourcemap age can likewise be empowered with the - - source-map banner. An illustration of how to minify your code utilizing the Terser JavaScript API is incorporated beneath.

For more data on utilizing the Terser CLI and API, kindly see their documentation on GitHub.

Model USAGE FOR TERSER WITH YOUR CURRENT CONFIG
// Import Terser so we can utilize it
const { minify } = require('terser');

// Import fs so we can peruse/compose documents
const fs = require('fs');

// Characterize the config for how Terser ought to minify the code
// This is set to how you right now have this web device designed
const config = {
  pack: {
    dead_code: valid,
    drop_console: bogus,
    drop_debugger: valid,
    keep_classnames: bogus,
    keep_fargs: valid,
    keep_fnames: bogus,
    keep_infinity: bogus
  },
  disfigure: {
    eval: bogus,
    keep_classnames: bogus,
    keep_fnames: bogus,
    toplevel: bogus,
    safari10: bogus
  },
  module: bogus,
  sourceMap: bogus,
  yield: {
    remarks: 'some'
  }
};

// Load in your code to minify
const code = fs.readFileSync('my_code.js', 'utf8');

// Minify the code with Terser
const minified = anticipate minify(code, config);

// Save the code!
fs.writeFileSync('my_code.min.js', minified.code);