0

Multiple sites reference combining JavaScript and CSS files to improve web page performance, including examples of using ANT build scripts to concatenate the files prior to deployment.

I've search, and haven't found any information how to automate updating references to those files in HTML and other documents. I am looking to avoid hacking together something error prone, and want to learn from others who have automated builds in the past.

Are there automated tools in the wild to complete this task that I'm not seeing? Are there recommended processes to update the script and link tags in HTML? Can these solutions be integrated with ANT or similar build tools?

Improve this question
1
  • To be clear, I know techniques to combine the JavaScript and CSS files during deployment/build, what I'm looking for are ways to update the HTML files that refer to the separate scripts during development to refer to the combined script at deployment/build time. Commented Nov 3, 2010 at 14:01

3 Answers 3

Reset to default
1

There sure is and it's a smart thing to do.

I found a PHP solution, don't know it that's okay for you, but if it isn't you can still read it's source (it's not difficult) and learn a lot. The solution works like this:

  1. Rewrite your requests like this: from css/main.css and css/skin.css to css/main.css,skin.css (of course you can put many more).
  2. Use apache's mod_rewrite to redirect this request to a script (in our case combine.php), that will combine all files to a single one.
  3. The script combines all the files and sends the combined file. Then it saves it to a cache folder.
  4. Next time around it checks if there is an up-to-date version of the cache and serves that one. If the latest file modification time has changed, it discards the cache.

The solution works great and it even makes use of HTTP cache headers and spits out an [ETags], which you should do anyway.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

You are correct this is a great way to speed up page loading. It will even work in conjunction with a CDN, which the other poster recommended.

Here is a small script that will pack multiple files in to one for deployment. It supports both JS and CSS, and will even "minify" them by removing whitespace, etc. Just hook this in to your build and deploy scripts.

juicer: http://cjohansen.no/en/ruby/juicer_a_css_and_javascript_packaging_tool

What even better, it will follow JS and CSS import statements, so you only need to point your HTML files to the loader file and it will work in both development and production. (Assuming you replace the loader file with the combined file on deployment.)

There are others, including some run-time solutions. But it sounds like you have a build process in place anyway.

As far as HTML updating, if you still need it, since automated deployments are very popular in the Ruby world, and you may find some standalone utilities to help even for non-ruby projects. (As above) Methinks this would be best handled by your own project's template language, though. (With a static resource revision id, or such.)

Good luck, and let us know what you find.

Improve this answer

Comments

0

I think what you really want is a CDN Content Delivery Network.

Read about it here

http://developer.yahoo.com/performance/rules.html

http://en.wikipedia.org/wiki/Content_delivery_network

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.