[SOLVED] Minify and compress js code snippet in react (client side)

Minify and compress js code snippet in react (client side)

I need to minify and compress a code snippet string to be sent to the sever and i'm using UglifyJs for that, But there's two problems with this approach. First that UglifyJs doesn't support Es6+ code and i'm getting error from minification result when i run this code:

import { minify } from "uglify-js";
const { code, error } = minify(`asyc function() {...});

the error is:

Unexpected token: keyword (function)

The solution for this seems to be uglify-js-es6 package which makes UglifyJs compatible with Es6+.

The other problem is that UglifyJs isn't compatible with browser (in my case react) because of fs usage, the error is:

Module not found: Error: Can't resolve 'fs' in 'C:\Users...'

The solution for this is uglifyjs-browser package. Now the actual problem is that i don't know how to use these two packages in merge to handle my case, in the package.json file uglify-js is the Es6+ compatible version:

{
    ...,
    "uglify-js": "github:mishoo/UglifyJS2#harmony",
    ...,
}

But uglifyjs-browser is still not working. Actually it should not because uglifyjs-browser is compatible with UglifyJsv3 and uglify-js-es6 with UglifyJsv2! The other solution that i tried was to convert es6 to es5 via Babel, but it didn't work cause of fs usage in Babel.

Any help on this? is there any other solution or package to minify code snippets in client side? Thank you.

Solution

Seems like uglifyjs-browser is no longer supported, try using Terser, to minify code client side as it is in active development. I used it, to check if it works in the browser: https://codesandbox.io/s/naughty-shadow-7pey78?file=/src/index.js . Seems like it does work well as a minifier/compressor.