This question already has answers here:
What is the best method to reduce the size of my Javascript and CSS files?
(18 answers)
Closed 7 years ago.
Good day everyone.
I have read up quite extensively on Javascript Compression. I currently host 23 javascript files using IIS GZip compression method. I just want to know is there a better solution to compress the javascript files. My one file is over 7MB this is causing quite a problem at the moment. Is it Possible to Use MVC Type Bundles To render the javascript? I am using Asp.Net
Thank you in advance.
Here's what you must do
1) Concatenate javacript files to minimize the overhead related to file querying (this overhead will disappear with HTTP2 but we're not quite here. Today your page is probably more slowed by the number of files than by their combined size. There are many ways to concatenate files but it should be automated so that you don't have to do it manually every time you change the source files. If you're not familiar with powershell and the likes, dive into build solutions.
2) Don't compress the JS file(s), let the browser and the server negotiate the compression themselves. Any decent server gzip the JS files it serves.
3) Minify the concatenated file. Here again there are several solutions. Uglify.js is both fast and efficient. The minification is a process which consists in removing any useless (for the browser) part of your code (comments, spaces, etc.) and renaming some variables in order to make the code lighter. You'll configure the minification to also produce a source map file which will let you debug in the browser (not quite as easily than with an unminified file but much better than without a map).
Related
This question already has answers here:
Put javascript in one .js file or break it out into multiple .js files?
(11 answers)
Should I copy all my JavaScript sources into one single file?
(3 answers)
Closed 9 years ago.
Ok, so I have a reasonable size project, where I'm using jquery backbone and a couple of other javascript libraries. I was wondering if I should have one file for my javascript libraries and another for my custom code. Or a bunch of separate javascript files.
It is generally a good idea to have fewer HTTP requests. So you should reduce the number of files as much as is reasonable.
My personal preference is to have three "groups" of JavaScript files:
Core file. Contains functions that are used almost everywhere and other useful page initialisation things.
Module files. Contains code that is used in several places, but not everywhere. Can be dropped in to provide additional functionality. For instance, if you have a script to handle date inputs, you could include it as a module file and add it to pages that have date inputs.
Page-specific files. These files contain code that is only used in one place. The only reason they're added as separate files than as part of the page itself is for cache reasons.
One big file. You should minify the code when it goes to production and compress it if its large. You want to make as few requests to the server as possible to improve page performance
It's best to separate it out, but not get overzealous. That way you can reuse your library code later. Also, everyone likes working with separate files more because it keeps things more organized.
That said, it's also best to give the user one compressed file so that everything can be cached easily, and this also reduces the number of page requests. Rails 3 does this automatically in the asset pipeline, for example. You can write a script to run your favorite compressor. But you shouldn't sacrifice code readability for this -- you can have your cake and eat it too!
One big file or two files: one small and one big.
To be clear, during the development it's good have separate files – maybe using something like requireJS. But when you deploy it, it's good compress everything in one file, in order to reduce the HTTP latency and requests.
I mentioned two files. In some cases, it could be good having one small file, that takes care of the "bootstrap" operations, meanwhile the "big file" – especially if it's really big – is downloaded.
This is useful especially for the first access, because users doesn't have your files cached yet.
As a rule, I go with as few as possible simply to reduce the number of requests made to the server.
As suggested it is nice to work with smaller files, but for production code, your build process should include optimization. Part of that optimization should be minimizing the file sizes and network traffic optimzation, by combining into a single js file to reduce calls made by the browser.
Depends on the size of your application. But typically always better to group your javascript files appropriately for better maintainability and re-usability.
You could use a JS module loader like RequireJS to load your JavaScript. At least the files will be organized. You can enhance server performance by making sure these files can be cached on the user's browsers so that they only download them once.
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Make File for Javascript
Actually i am writing some javascript for testing purpose.
i want to use multiple javascripts in which functions are defined.
Is there any way to achieve this ?
I think Make file is the way.
But i don't know that also.
I want to generate make file.
Can any body suggest me how is to be done?
Creating makefile is an interesting solution, but you can also use require.js library to set the sequense of loaded scripts.
If you looking to combine multiple scripts as one. You can the use build script Boilerplate.
Why to use it? Its not only about scripts.
Combines and minifies javascript (via yui compressor)
Inlines stylesheets specified using #import in your CSS
Combines and minifies CSS
Optimizes JPGs and PNGs (with jpegtran & optipng)
Removes development only code (any remaining console.log files, profiling, test suite)
Basic to aggressive html minification (via htmlcompressor)
Autogenerates a cache manifest file (and links from the html tag) when you enable a property in the project config file.
Revises the file names of your assets so that you can use heavy caching (1 year expires).
Upgrades the .htaccess to use heavier caching
Updates your HTML to reference these new hyper-optimized CSS + JS files
Updates your HTML to use the minified jQuery instead of the development version
Remove unneeded references from HTML (like a root folder favicon)
Runs your JavaScript through a code quality tool (optional)
If you have several separate files and you want to append them all it into one file before, f.i. using it one your website, then any script or tool is good: Make, Rake, Cake, or your own, in your language of choice. If it goes to the web, it should be also compressed. Now how to do it, is beyond scope of this question, there are loads of articles on the web about all those topics. You are encouraged to come back when (if) you hit some more detailed problem.
What is the simplest way to combine JavaScript files into a single file in a Django project?
Explanation
I want this to work with Ember.js/Backbone where you (usually) have many different JavaScript in multiple directories. Directories would all be in one folder called app/ for example, like: app/views/ app/models/ /app/routers/
Requirements
Work together with the staticfiles app
Still be separated while in development mode for easier debugging (only compile when calling collectstatic?)
Work with Require.js (guess that shouldn't be too hard, but putting it in here to be sure)
Extra credit
Explain a best practices way of combining Django and Ember/Backbone.
I am an happy user of django compressor, it does combine, minify, debug-friendly, you can use it with staticfiles, easy to plug with custom storage backend (eg. S3)
https://github.com/jezdez/django_compressor
The reason you want to combine many files into one is so to minimize latency of setting up and tearing down http requests, the fewer you make the better. However, many newer browsers are downloading JavaScript files in parallel (still executing sequentially). The consequence is that downloading a single 1Mb file may be slower than three 350Kb files.
you can use from CDNs.
As mentioned in the previous answer, django-compressor is nice, but you often get better loading times when using a dedicated javascript loader instead. My tip is to check out Head.js for example (http://headjs.com/) (there are tons other out there as well). Often combining scripts can be contra productive when considering caching, using javascript located on CDN:s etc.
One thing to remember is that Iphone 3/4 will just cache 15/25KB of javascript, so if you have huge scripts and combine them you can run into trouble. http://www.phpied.com/iphone-caching/
I've been using yuicompressor.jar on my test server for on-the-fly minimisation of changed JavaScript files. Now that I have deployed the website to the public server, I noticed that the server's policies forbid the use of exec() or its equivalents, so no more java execution for me.
Is there a decent on-the-fly JS compressor implemented in PHP? The only thing resembling this that I was able to find was Minify, but it's more of a full-blown compression solution with cache and everything. I want to keep the files separate and have the minimised files follow my own naming conventions, so Minify is a bit too complex for this purpose.
The tool, like yuicompressor, should be able to take either a filename or JavaScript as input and should either write to a file or output the compressed JavaScript.
EDIT: To clarify, I'm looking for something that does not have to be used as a standalone (i.e. it can be called from a function, rather than sniffing my GET variables). If I just wanted a compressor, Minify would obviously be a good choice.
EDIT2: A lot has changed in the five years since I asked this question. Today I would strongly recommend separating the front-end workflow from the server code. There are plenty of good tools for JS development around and except for the most trivial jQuery enhancements it's a better idea to have a full workflow with automated bundling, testing and linting in place and just deploy the minified bundles rather than the raw files.
Yes there is, it's called minify.
The only thing in to worry about in the way of complexity is setting up a group, and there's really nothing to it. Edit the groupsConfig.php file if you want multiple JS/CSS in one <script> or <link> statement:
return array(
'js-common' => array('//js/jquery/jquery-1.3.2.min.js', '//js/common.js', '//js/visuals.js',
'//js/jquery/facebox.js'),
'css-common' => array('//css/main.css', '//css/layout.css','//css/facebox.css')
);
To include the above 'js-common' group, do this:
<script type="text/javascript" src="/min/g=js-common"></script>
(i know i was looking for the exact same thing not knowing how to deal directly with the jar file using php - that's how i ended up here so i'm sharing what i found)
Minify is a huge library with tons of functionalities. However the minifying part is a very tiny class : http://code.google.com/p/minify/source/browse/trunk/min/lib/Minify/YUICompressor.php
& very very easy to use :
//set the path to the jar file
Minify_YUIcompressor::$jarFile=_ROOT.'libs/java/yuicompressor.jar';
//set the path to a writable temp folder
Minify_YUIcompressor::$tempDir=_ROOT.'temp/';
//minify
$yourcssminified=Minify_YUIcompressor::minifyCss($yourcssstringnotminified,$youroptions)
same process for js, if you need more functionalities just pick from the library & read the source to see how you can make direct call from your app.
I didn't read the question well, since minify is based on using the jar files, the op can't use it anyway with his server config
Minify also include other minifying methods than yui, for example:
http://code.google.com/p/minify/source/browse/trunk/min/lib/JSMinPlus.php?r=443&spec=svn468
Try Lissa:
Lissa is a generic CSS and JavaScript loading utility. Lissa is an extension of the YUI PHP Loader aimed at solving one of the current loader limitations; combo loading. YUI PHP Loader ships with a combo loader that is capable of reducing HTTP requests and increasing performance by outputting all the YUI JavaScript and/or CSS requirements as a single request per resource type. Meaning even if you needed 8 YUI components which ultimately boil down to say 13 files you would still only make 2 HTTP requests; one for the CSS and another for the JavaScript. That's great, but what about custom non-YUI resources. YUI PHP Loader will load them, but it loads them as separate includes and thus they miss out on benefits of the combo service and the number of HTTP requests for the page increases. Lissa works around this limitation by using the YUI PHP Loader to handle the loading and sort of YUI and/or custom resource dependencies and pairs that functional with Minify.
This question already has answers here:
Closed 13 years ago.
Duplicate:
Best javascript compressor
Which javascript minification library produces better results?
What is the best method to reduce the size of my Javascript and CSS files?
So far I have seen these tools to compress javascript files
Packer
JSMin
Yahoo Compressor
On Packer page there is a section "Packer versus JSMin" which says that JSMin can be more efficient than Packer. On Yahoo Compressor page it states that Yahoo compressor is more efficient than JSMin, so it looks like Yahoo compressor might be a best candidate.
What is the best option for compressing javascript files?
Yahoo's compressor, for a combination of safety, and decent compression.
It uses a real JavaScript parser, rather than using a set of regular expressions. It is able to do the same kind of variable renaming that Packer can, but is much safer. It won't break if you forget to put a semicolon at the end of a function definition.
Packer does have an encoding feature that generates an even smaller file. However, it's only effective if your web server does not support gzip or deflate compression. With gzip / deflate, YUI and Packer generate files that are about the same size.
I use YUICompressor exclusively because it intelligently minifies removing whitespace and reducing internal variables down whilst maintaining external refs properly and has yet to break my code and it also does CSS to boot!
After that we serve up on a GZip HTTP connection and voila!
Changing the server settings to use gzip compression, then you get compression on any text file, javascript, html, etc. You also won't get the decompression lag that you get with compressed javascript on each page load.