Menu
How can we minify .jsx files which are used in React js. Normal minification process does not work.
Is there a separate tool for .jsx files?
216
To minify JavaScript, try UglifyJS. The Closure Compiler is also very effective. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.
They're completely interchangeable! In some cases users/developers might also choose JSX over JS, because of code highlighting, but the most of the newer editors are also viewing the react syntax correctly in JS files.
What is JSX? JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add HTML in React.
Minifying strips out all comments, superfluous white space and shortens variable names. It thus reduces download time for your JavaScript files as they are (usually) a lot smaller in filesize. So, yes it does improve performance. The obfuscation shouldn't adversely affect performance.
In-browser JSX Transformation is generally not recommended for usage in production.
So you have the option to precompile the JSX into plain JavaScript and then continue with the minifying like you would normally do.
For more information: https://facebook.github.io/react/docs/tooling-integration.html
Personally I am using Reactify for the JSX to JavaScript transformation and then I run UglifyJS to minify the result. It is very easy to automate in your build process.
181
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
