Opened 9 years ago

Closed 9 years ago

Last modified 9 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:

Description

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?

Change History (2)

comment:1 Changed 9 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) http://download.dojotoolkit.org/release-1.5.0rc2/dojo-release-1.5.0rc2/dijit/tests/test_Calendar.html.

comment:2 Changed 9 years ago by dante

the command line param is: cssOptimize

I typically use: cssOptimize=comments.keepLines

FYI

Note: See TracTickets for help on using tickets.