Stephan Beal wrote:
Hi, all!
i just wanted to take a moment to share a tip which i don't see used
too often on live sites:
Combine all of your JS scripts into a single file. This helps reduce
the load time of the page by reducing the number of separate GET
requests.
In principal you should be able to do the following to combine the
files:
cat file1.js file2.js file3.js > all.js
but some scripts do not work with this because they are missing a
trailing semicolon (shame on them!). A simple workaround is:
for i in file1.js file2.js file3.js; do
cat $i
echo ';'
done > all.js
If you're using GNU Make to build your project, here's a bit of Make
code which does this:
mega.js.inputs := jquery.pack.js interface.js \
jquery.blockUI.pack.js jquery.contextmenu.packed.js \
jquery.idTabs.pack.js \
jquery.colorPicker.js \
jquery.bogoTabs.js
$(mega.js.inputs):
$(mega.js): $(mega.js.inputs)
@echo "Creating $@ ..."; \
for i in $(mega.js.inputs); do cat $$i; echo ';'; done > $@
# ^^^^^ without the extra semicolon, the included file doesn't work
Obviously, edit $(mega.js.inputs) to suit your project.
That is very reasonable. Here's some information why:
http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
If you're on Rails, you can use the AssetPackager plugin that does the
merging automatically for you depending on the environment.
--Klaus
