Opened 12 years ago

Closed 12 years ago

Last modified 12 years ago

#11392 closed enhancement (worksforme)

Minimize loading of css files

Reported by: ontak Owned by: James Burke
Priority: high Milestone: tbd
Component: BuildSystem Version: 1.5.0b2
Keywords: shrinksafe Cc:
Blocked By: Blocking:



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";


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?

Change History (2)

comment:1 Changed 12 years ago by bill

Resolution: worksforme
Status: newclosed

Simply doing a build will concatenate all the CSS files, you can check by watching the network trace of (for example)

comment:2 Changed 12 years ago by dante

the command line param is: cssOptimize

I typically use: cssOptimize=comments.keepLines


Note: See TracTickets for help on using tickets.