CODEWITHSUNDEEP
javascriptjquerycssasp.net-mvcminify
ekkis
ekkis

Reputation: 10226

Minification for Css/Js - right way?

In my project each page has a bunch of dependent Javascript and Css. Whilst developing I just dumped this code right into the page but now I'm looking to clean it up...

it appears that the general approach out there is to package all the Javascript/CSS for an application into two big files that get minimised.

This approach has the benefit that it reduces bandwidth since all the front-end code gets pulled in just once from the server... however, I'm concerned I will be increasing the memory footprint of the application by defining a whole ton of functions for each page that I don't actually need - which is why I had them on a per-page basis to begin with.

is that something anyone else cares about or is there some way to manage this issue?

yes, I have thought of doing conditional function creation since I need to run code conditionally for each page anyway - though that starts to get a bit hackish in my view.

also, is there much cost to defining a whole ton of Css that is never used?

Upvotes: 1

Views: 256

Answers (4)

Jasper
Jasper

Reputation: 76003

The biggest thing you can do for bandwidth is make sure your server is compressing output. Any static document type should be compressed (html, js, css, etc.).

For instance the jQuery Core goes from approx. 90KB to 30KB only because of the compressed output the server is sending to browsers.

If you take into account the compression, then you have to create some mammoth custom JS includes to really need to split-up your JS files.

I really like minifying and obfuscating my code because I can put my documentation right into the un-minified version and then the minification process removes all the comments for the production environment.

Upvotes: 1

Mateusz W
Mateusz W

Reputation: 2031

If you have a lot of javascript code you can take a look on asynchronous loading of js files.

Some large project like ExtJs or Qooxdoo have build in loaders to load only required code, but here is a lot of libs which simplify this, and you can use in your project (e.g. head.js, LAB.js).

Thanks to them you can build application which loads only necessary files, not whole javascript code which in case of big apps can be a heavy stuff for browser.

Upvotes: 0

Brett
Brett

Reputation: 4061

One approach would be to have all the shared javascript minified and compressed into one file and served out on each page. Then the page-specific javascript can be compressed/minified to its own files (although I would consider putting any very common page's javascript into the main javascript file).

I've always been in the habit of compressing/minifying all of the CSS into one file, rather than separate files for each page. This is because some of the page-specific files can be very small, and ideally we share as much css across the site as possible.

Like Jasper mentioned the most important thing would be to make sure that your sever is GZIPing the static resources (such as javascript and css).

Upvotes: 0

Rich O'Kelly
Rich O'Kelly

Reputation: 41757

Serving the javascript/CSS in one big hit for the application, allows the browser to cache all it needs for all your pages. If the standard use case for your site is that users will stay and navigate around for a while then this is a good option to use.

If, however, you wish your landing page to load quickly, since there is a chance that the user will navigate away, consider only serving the CSS/javascript required for this page.

In terms of a performance overhead of a large CSS file - there will be none that is noticeable. All modern browsers are highly optimised for applying styles.

As for your javascript - try not to use conditional function creation, conditional namespace creation is acceptable and required, but your functions should be declared only in one place.

Upvotes: 1

Related Questions