英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论