Minimize loading of css files

[ontak]

Hi,

Since we have been Dojo Toolkit for some time now, we would like to minimize the loading (http get) of the css files on our HTML page. Hence decrease the total load time of this HTML page.

For example, on my html page, I have added the following to use the "soria" theme for my dijit.

<style type="text/css"> @import "./dijit/themes/soria/soria.css";

@import "./dojo/resources/dojo.css";

</style>

Following the network trace, I can see that soria.css and dojo.css files will also get from the server:

/themes/dijit.css, /soria/layout/Common.css, /soria/layout/TabContainer.css, /soria/layout/AccordianContainer.css, /soria/layout/BorderContainer.css, /soria/form/Common.css, /soria/form/Button.css, /soria/layout/SplitContainer.css, /soria/form/ComboBox.css, /soria/form/CheckBox.css, /soria/form/RadioButton.css, /soria/form/Textarea.css, /soria/form/Slider.css, /soria/Tree.css, /soria/ProgressBar.css, /soria/TitlePane.css, /soria/Calendar.css, /soria/Toolbar.css, /soria/Dialog.css, /soria/Menu.css, /soria/Editor.css, /soria/ColorPalette.css, soria/images/tabStripe.gif, soria/images/tabContainerSprite.gif.

My question is this:

A) Is there a way to compress all these required soria css files into one (like shrinksafe) and @import it into my page as one css file?

B) IF not, what is the best practice to develop a HTML page with Dojo Widget while keeping network traffic to a minimal so that the HTTP requests are reduced with one of Dojo's stylesheet like soria?

[bill]

Simply doing a build will concatenate all the CSS files, you can check by watching the network trace of (for example) ​http://download.dojotoolkit.org/release-1.5.0rc2/dojo-release-1.5.0rc2/dijit/tests/test_Calendar.html.

[dante]

the command line param is: cssOptimize

I typically use: cssOptimize=comments.keepLines

FYI