Do you know of an in-browser javascript compressor?

#discuss

I am hoping this post is appropriate here :)

I'm looking for suggestions for an in-browser javascript compressor. I don't need an obfuscater/uglifier (though, it's welcome). I need a Javascript library than can take a string of javascript code that might be formatted with new lines, spaces, tabs.. etc. and output a single line of javascript.

tried to look on the web and on github, but most libraries I found depended on nodeJS API.

For example:

function sayHi(){
  console.log('Hi!');
}

sayHi();

would be outputted as:

function sayHi(){console.log("hi there")}sayHi();

I need the JS in one line for a very specific use-case for an open source chrome extension I am going to start working on. Your help is appreciated!

After writing this I realize that I can just remove all instances of new line with a regex. But maybe there is something better out there ?

Top comments (8)

Mihail Malo • Sep 14 '18

What stops you from just using terser(maintained fork of uglify-es) in the browser?

Ahmed Musallam • Sep 14 '18 • Edited

It looks to me, on the surface, that it depends on NodeJs APIs and those APIs are not available in the browser.

Mihail Malo • Sep 14 '18

Not at all. How are you developing your browser app?

Ahmed Musallam • Sep 15 '18

The documentation literally mentiones nodejs. Do you have an example in a jsfiddle or jsbin or something similar?

My app will be developed in vanillajs. So no libraries and nothing fancy.

Mihail Malo • Sep 15 '18

What is the build process? How do you bundle your app? (Parcel|Webpack|Rollup|Browserify)

Mihail Malo • Sep 15 '18 • Edited

Bonus Prettier for the lulz

import prettier from 'prettier'
import * as Terser from 'terser'

const main = () => {
    const input = document.getElementById('theinput')
    const output = document.getElementById('theoutput')

    const makeTerser = () => {
        const minified = Terser.minify(
            input.value,
            /* remove this options object to mangle names */ {
                mangle: false,
            },
        )
        if (minified.code) output.value = minified.code
    }

    const makePrettier = () => {
        try {
            const pretty = prettier.format(output.value, {
                parser: 'babylon',
            })
            input.value = pretty
        } catch (err) {}
    }

    input.addEventListener('input', makeTerser, { passive: true })
    output.addEventListener('input', makePrettier, { passive: true })

    input.value = `function fibonacci(num, memo = {}) {

  if (memo[num]) return memo[num]
  if (num <= 1) return 1

  return memo[num] = fibonacci(num - 1, memo) + fibonacci(num - 2, memo)
}
`
    makeTerser()
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', main, {
        once: true,
        passive: true,
    })
} else {
    main()
}