Discussion on: Do you know of an in-browser javascript compressor?

[Mihail Malo]

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()
}

click it just click it do not be afraid just click it

[Ahmed Musallam]

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