I'm trying to build (or find an existing one I can use) a web filter that will compress a JavaScript file at runtime. I've tried building one based on YUICompressor, but I'm getting weird errors out of it when I try and pass a String based source into it instead of an actual file.
Now I'm expecting to get bombarded with responses like 'Real time compression/minification is a bad idea' but there is a reason I'm not wanting to do it at build time.
I've got a JavaScript web application that lazy loads it's JavaScript. It will only load what it actually needs. The JavaScript files can specify dependencies and I already have a filter that will concatenate the requested files and any dependencies not already loaded into a single response. This means that there is a large number of different combinations in the JavaScript that will be sent to the user which makes trying to build all the bundles at build time impractical.
So to restate. Ideally I'm looking for an existing real time javascript filter I can just plug into my app.
If one doesn't exist I'm looking for tips on what I can use as building blocks. YUICompressor hasn't quite got me there and GoogleClosure seems to only be a web API.
Cheers, Peter
JSCompress can minify and reduce the size of your JavaScript by 80%. It offers a simple click-and-go interface where you can either paste your code or upload your .js file for minification. You will receive the minified output as clean, copyable code rather than a .js file.
After you have pasted the JavaScript code or uploaded the JavaScript file, you just have to press the Beautify Code button, and it will start the unminification process. This is how the code looks like after the unminification process is complete. The tool has formatted the code to how it was previously, and it is now much more readable.
First, run the JavaScript code by linked it with an HTML file that you want to minify on the browser. Then to open the developer tools, you can press F12 on your keyboard) or go to More tools and then Developer tools as shown below. After the developer tools open up, click on the Sources tab.
And compression rewrites the code in binary to reduce the file size. Both minification and compression are reversible, which means you can turn back the code to its original form, but uglification is irreversible. You can minify your JavaScript code in a variety of ways. Each of these methods takes a distinct approach from the others.
Take a look at The JavaScript Minifier from Douglas Crockford. The source is here: JSMin.java
. It's not a filter and only contains the code to minify. We've made it into a filter where we combine and minify JavaScript on the fly as well. It works well, especially if you have browsers and a CDN cache results.
Update: I left out that we cache them on the server too. They're only regenerated if any of the assets required to make the combined and minified output have changed. Basically instead of "compiling" them at build time, we handle each combination once at runtime.
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