You can speed up page load times by combining JavaScript files. Today I will describe the process of merging several JavaScript file into one in your ZK application.

Case study (ZKDemo)

In the index.zul of the zkdemo there are about 15 JavaScript files that will be initially loaded:

• http://www.zkoss.org/zkdemo/zkau/web/947199ea/js/zk.wpd
• http://www.zkoss.org/zkdemo/zkau/web/947199ea/js/zul.lang.wpd
• http://www.zkoss.org/zkdemo/userguide/macros/category.js
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zkmax.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.wgt.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.utl.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.layout.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.wnd.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.tab.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.inp.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.box.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.sel.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zk.fmt.wpd
• http://www.zkoss.org/zkdemo/zkau/web/_zv2010062914/js/zul.mesh.wpd

This means the browser will trigger 15 requests to load the 15 JavaScript files. Even if each file is not too big, it still takes more time to connect to the server and download it.

However, we can create a DSP file which includes several JavaScript into one and declare it at the top of the index.zul. For example,

zkdemo.js.dsp

<%@ page contentType="text/javascript;charset=UTF-8" %>
<%@ taglib uri="http://www.zkoss.org/dsp/web/core" prefix="c" %>
${z:setCWRCacheControl()}

Note:

1. The included JavaScript files have their own sequence, so you cannot place them in randomly
2. The zk.wpd is a ZK core JavaScript file hence you don’t need to include it
3. The zul.lang.wpd is an I18N message, so you don’t need to include it
4. In ZK 5.0.4 we introduced a new feature, which we will discuss later. However, since the release of this new feature the packages zul, zul.wgt, and zkmax will be merged automatically into the ZK package, so you don’t specify them in the zkdemo.js.dsp file.
5. The setCWRCacheControl() method is used to set the Cache-Control and Expires headers for class Web resources

index.zul

// omitted

As you can see, we append an Expression Language script(${desktop.webApp.build}) at the end of the URI zkdemo.js.dsp, which will solve the browser caching issue when the file is been updated.

After making the above changes, the request of loading JavaScript was reduced from 15 to 3 requests. Here is the result of our testing. We ran the test 5 times using Firefox 3.6.8 with Firebug (net).

Note that the distance of the test case is from our office (Taipei, Taiwan) to our server (Houston, TX USA).

A way to merge several JavaScript packages into the ZK package

This feature is new to ZK 5.0.4 and enables you to automatically merge JavaScript files. To do this you should specify the merge attribute as true in the JavaScript tag in lang-addon.xml. For example,

In zul.jar!metainfo/zk/lang.xml

As you can see, by default the two JavaScript files will be merged into the ZK JavaScript file package automatically.