#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 11 years ago by
Resolution: | → worksforme |
---|---|
Status: | new → closed |
comment:2 Changed 11 years ago by
the command line param is: cssOptimize
I typically use:
cssOptimize=comments.keepLines
FYI
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.