This question already has answers here:
Closed 13 years ago.
Possible Duplicates:
How to organize minification and packaging of css and js files to speed up website?
What do you use to minimize and compress JavaScript libraries?
Hi there
Do you know any tool/method which can help me to minimize the size of a javascript file?
There are a number of online tools available for minimising your javascript. The following tools all require a download and to be run on your machine:
YUI Compressor
JSMin
ShrinkSafe
These tools allow you to paste in/submit your javascript online and get a minimised version back without having to run any programs on your machine:
Packer
JS Minifier
One potential issue with minimising your javascript is the need to keep a minimised version in your codebase for deployment, and an expanded version for development/maintenance. One way around this is to have your webserver look after compression and minimisation of the files in question. This may lead to some additional overhead on your webserver, but you can address this via cache lifetimes etc.
For Apache, Apache2::Response::FileMerge handles this, and can use JavaScript::Minifier to do the actual minimisation.
On nginx, NginxEmbeddedPerlMinifyJS will do much the same thing.
There are two that I know of:
JSMin
YUI Compressor (Java version, .NET version)
The YUI compressor is slightly better in that it will compress CSS too. The .NET version can be integrated with MSBuild.
I have been using JavaScriptMVC for a while, which has a built-in function to combine and compress all javascript files. But it's actually a complete framework to structure your code.
There are a lot of minifiers on the market. Here are three:
MinifyMe
Dojo also has a compressor
Compressing with JavaScriptMVC
The great benefit of JavaScriptMVC and Dojo is that they don't use Regular Expressions to perform compression. I don't know about the other ones. Compression by using regular expressions can sometimes lead to errors in your compressed/minified Javascript code and is kind of brittle
Other answers mention various tools to minify your Javascript/css.
however, don't forget you can also GZip your javascript/css, as demonstrated here for isntance - either manually or using some preparation stage when you deploy, or by using mod_gzip or an equivalent.
I'm successfully using the YUI Compressor.
I like JavaScriptCompressor.com simply because it's online and doesn't need any software to be downloaded or installed.
Check out this site. It compares different JavaScript compression utilities on the fly.
Related
I want to minify java script files in my vs2010 web app ASP.NET solution. I know that YUI compressor can do it pretty well on its own. So I was wondering if I can do the following:
I have all JS files in the Scripts folder in my solution.
JS files are included into aspx pages as follows:
<script src="Scripts/scripts.js" type="text/javascript"></script>
It would be nice to minify the 'scripts.js' file when building "Release" configuration, as well as when I'm publishing my web app.
Can someone explain here how to automate it all in VS2010?
Microsoft actually has a pretty good solution for this. You can read about it here.
competent_tech's answer would achieve your objective by using the Microsoft Ajax Minifier in an MSBuild Task. The Ajax Minifier is another minification tool that essentially does the same thing that the YUI compressor does. Its performance and optimized javascript and css are very comparable to the YUI solution.
If you are specifically interested in a YUI Compressor option, check out http://yuicompressor.codeplex.com. This is a .net port of the YUI Compressor and also provides a MSBuild Task solution.
Lastly, I'll recommend my own OSS project, http://RequestReduce.com. This will crunch and combine your css and javascript at run time. It caches them and serves them using far future expires headers and customized ETags. Additionally, it can automatically sprite your background images. The nice thing about this is that it requires no codeor configuration for basic functionality. It can dynamically find your css and javascript files.
RequestReduce does use the ajax minifier but allows you to plug in your own minifier pretty easily. The wiki at https://github.com/mwrock/RequestReduce/wiki has sample code for accomplishing that.
With Rails 3.1, the sprockets gem was introduced. I have written a very large game engine in javascript/coffeescript which I plan to release as open source software in the future, but at the moment, I would like to obfuscate the code to build a small barrier for people trying to cheat in the game. My question is:
What do I have to do to create an obfuscated version of the application.js file which was created by combining all my js files? Is there a best practice, a gem or it is even possible at all?
Thanks for your answer.
Tom
You could try dojo's ShrinkSafe - it will minify/obfuscate yoour sources and you can configure it to generate one single file out of several input source files.
Well, you could use Closure Compiler with advanced optimization, although I would recommend against it:
http://edgeguides.rubyonrails.org/asset_pipeline.html#javascript
Some time ago I saw a javascript library/development tool that takes several .js files (or modules, for that matter) and "compiles" it into one .js file. The goal of this tool is to facilitate the client-side development.
The sad thing is that I forgot the name of this tool. Does anyone knows the name of this library/tool (or some tool like this)?
You are possibly thinking of Chirpy?
Mashes, minifies, and validates your
javascript, stylesheet, and dotless
files. Chirpy can also auto-update
T4MVC and other T4 templates.
Chirpy is chippy. Use Google Closure
Tools, YUI Compressor for .Net, Ajax
Minifier, or Uglify.js to minify and
mash all of your precious assets. It's
easy, it's flexible, and it's
automatic.
Chirpy also flirts with T4. Auto-run
your T4 templates. Smart-run your
T4MVC template. Make your friends and
family members uber-jealous.
NEW Chirpy now supports CoffeeScript!
I really don't know what IDE you saw in the past.
But it can be done with Visual Studio 2010 with Build Events.
Take a look at this thread for more explanation and other ideas: Visual Studio 2010: Publish minified javascript files instead of the original ones. Other options here: Compress CSS/JavaScript before publish/package.
I know of two tools that do this. They each take different approaches.
Yahoo's YUI Compressor simply combines files, removes whitespace, and doesn't actually affect readability much. It reduces file size a little.
Google's Closure compiler actually "compiles" JS by simplifying certain types of expressions, rewriting variables, etc. Reduces file size a lot.
The Closure compiler doesn't give you easily-readable code, but it does the best job of reducing file size of these two. It also has various compilation optimizations that you can use. The YUI compressor page links to some more types of compressors that they replaced.
Both tools use a Java JAR file that accepts input files and an output file, which you can run before uploading your Javascript.
I've developing JavaScript since many years but have never really thought about the whole testing, developing and building stuff - but I realized it's pretty much necessary. We've just used a Subversion repository with simple release tagging (switching to git soon). As a new bigger pure JavaScript project (using jQuery) is arriving soon, I'd like to optimize the whole process.
I already did some research but never found a good starting tutorial.
It's definetly a good idea to split classes and separate code blocks into several js-files and not a big one (as Prototype or jQuery do it). These js-files must be "build" into a single file. How do I achieve that?
It's pretty much necessary to Unit-test the stuff me and my colleagues are coding. I found the js-test-driver which has an eclipse plugin that seems to be doing his job quite good. If my developer-folder contains all these src- and src-test-files, how do I integrate this in the building process?
For testing, take a look at this: https://stackoverflow.com/questions/32809/javascript-unit-testing
For merging all of your JavaScript into one file you can use something like YUI Compressor. You need to be looking for a minimizer first, compression second. A minimizer just takes the files and merges them together and gets rid of whitespace. A compressor will actually try to optimize the js for you by changing variable names and removing unnecessary code.
As for unit testing I am unsure of how you will want to do that. There are a few unit test libraries out there. A popular tool for testing is Selenium. I don't currently do unit testing so I am out of my element there..
For setting up your code you could always look at using a JavaScript framework like ExtJS or JavaScriptMVC. Those help you with setting up your code in the proper way and also helps focus your team on the proper standards and coding structure while also writing a lot of the code for you so you don't have to re-invent the wheel.
EDIT: Just a quick after thought. Even if you don't want to use a JavaScript framework, I would suggest checking them out, especially ExtJS, just to see how they organize their code and some of the tricks they do to keep it clean.
I'll answer part of your question:
These js-files must be "build" into a
single file.
This is possible only with server side language - in ASP.NET you have built in tools for that, otherwise build your own "merger" server side file and reference that file instead of the actual .js files.
These js-files must be "build" into a single file. How do I achieve that?
Definitely keep your files separate in version control, and only merge them during the build process.
The YUI compressor mentioned elsewhere is a java-based tool that will not only merge but -- of course! -- compress your files for faster download.
If you just want a simple merge of files, a simple Perl or bash-script (or other preferred scripting language) could concatenate multiple .js files into one for release -- just make sure that the build script also updates all HTML in the release to reference only the single page.
I need to pack all my js, but need to edit it going into source control.
is there a nice easy plugin for ccnet, or nant, that will allow me to pack my js, and store them in the same files on the way out to production.
Not really looking for file combining, just minifying each file.
Here is the best answer I have found. It calls the YUI version of minify and just uses plain old Nant to do so and replace the existing js files with the minifyed ones.
http://codeclimber.net.nz/archive/2007/08/22/How-to-use-YUI-JS-Compressor-inside-a-NAnt-build.aspx
I built my own Nant task off of this one.
http://www.nabble.com/Re:-All-.js-files-into-1-p19593677.html
I use copy concatenation and the YUI Compressor in a post build script. Old-school batch file style.
The compressor works like a charm. My .NET website application uses the website deployment project and is continuously built by TeamCity. A bit hackish perhaps, but it works.
I have written my own custom tool for this, its part of the runtime but could be easily changed to work in the continous integration process. It uses google's closure compiler. Check it out:
http://www.picnet.com.au/blogs/Guido/post/2009/12/10/Javascript-runtime-compilation-using-AspNet-and-Googles-Closure-Compiler.aspx
Thanks
Guido