DEV Community

Ahmed Musallam
Ahmed Musallam

Posted on

Do you know of an in-browser javascript compressor?

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();
Enter fullscreen mode Exit fullscreen mode

would be outputted as:

function sayHi(){console.log("hi there")}sayHi();
Enter fullscreen mode Exit fullscreen mode

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 ?

Discussion (8)

Collapse
qm3ster profile image
Mihail Malo

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

Collapse
ahmedmusallam profile image
Ahmed Musallam Author • Edited

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

Collapse
qm3ster profile image
Mihail Malo

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

Thread Thread
ahmedmusallam profile image
Ahmed Musallam Author

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.

Thread Thread
qm3ster profile image
Mihail Malo

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

Thread Thread
qm3ster profile image
Mihail Malo • 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()
}

Edit VanillaJS terser
click it just click it do not be afraid just click it

Thread Thread
ahmedmusallam profile image
Ahmed Musallam Author

I was not really planning to use a bundler. Wanted to go vanilla and with no build/npm. But it looks like I have to, which is not a big deal at all.

Thank you for the example! Extremely helpful!!

Collapse
gutmach profile image
Glenn Gutmacher