DEV Community

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

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 on

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 on

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