在React中,对JavaScript代码段进行压缩和缩小 (客户端)。

huangapple go评论59阅读模式
英文:

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 server, and I'm using UglifyJs for that. But there are two problems with this approach.

First, UglifyJs doesn't support ES6+ code, and I'm getting an error from the minification result when I run this code:

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

The error is:

Unexpected token: keyword (function)

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

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

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

The solution for this is the uglifyjs-browser package.

Now, the actual problem is that I don't know how to use these two packages together 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 work because uglifyjs-browser is compatible with UglifyJs v3, and uglify-js-es6 is compatible with UglifyJs v2!

The other solution I tried was to convert ES6 to ES5 via Babel, but it didn't work due to fs usage in Babel.

Any help on this? Is there any other solution or package to minify code snippets on the client side?

Thank you.

英文:

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.

答案1

得分: 1

似乎uglifyjs-browser不再受支持,尝试使用Terser在客户端上进行代码最小化,因为它正在积极开发中。我在浏览器中使用它来检查它是否正常工作:https://codesandbox.io/s/naughty-shadow-7pey78?file=/src/index.js。似乎它作为一个代码缩小/压缩工具运行得很好。

英文:

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.

huangapple
  • 本文由 发表于 2023年3月7日 19:21:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/75661338.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定