loading...

Do you know of an in-browser javascript compressor?

ahmedmusallam profile image Ahmed Musallam ・1 min read

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 ?

Posted on by:

ahmedmusallam profile

Ahmed Musallam

@ahmedmusallam

Lead Developer: Adobe Experience Manager. Father of one. Minnesota. Occasionally write here: ahmedmusallam.com and there: https://blogs.perficientdigital.com/author/amusallam/

Discussion

markdown guide
 
 

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

 

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

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.

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

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

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!!