-
Notifications
You must be signed in to change notification settings - Fork 0
CSS optimizations
The Aggregator provides a CSS module builder for building/minifying CSS files. This feature may be used in conjunction with a CSS loader plugin which delegates to the text plugin for loading the resource and then inserts the CSS into the browser using a dynamically created style sheet. An example of such a plugin is provided in the sample application.
The CSS module builder performs the following optimizations on CSS resources (resources who's module names end with .css):
- White-space and comment removal
- Optional inlining of image references using the Data URI Scheme
- Optional inlining of CSS files imported using the @import statement
Various options and parameters for controlling the behavior of the CSS module builder are specified using properties in the server-side AMD config file. The following config properties are recognized by the CSS module builder:
| Name | Description |
|---|---|
| inlineCSSImports | If the value of this property is "true", then the CSS module builder will recursively inline CSS modules that are imported using the @import directive and perform the necessary rewriting of relative URLs. The default value is false. |
| inlinedImageSizeThreshold | If the value of this property is an integer value greater than zero, it specifies the maximum size of image references to inline using the Data URI Scheme. The default value is zero. |
| inlineableImageTypes | This property specifies a comma seperated list of image types (filename extension without the leading '.') to inline. The standard image types gif, jpeg, png and tiff are included by default and do not need to be specified here. If you wish additional image types to be inlined, then you must specify them here. |
| inlinedImageIncludeList | A comma separated list of image names (may include the '?' and '*' wildcard characters) listing the names of images that should be inlined. If this config property is specified, then only images listed in this list that are not also listed in inlinedImageExcludeList will be inlined. |
| inlinedImageExcludeList | A comma separated list of image names (may include the '?' and '*' wildcard characters) listing the names of images that should not be inlines. Any images listed here will not be inlined, regardless of whether or not they satisfy any of the other conditions specified about. |
The Aggregator sample application includes a CSS loader plugin that can be used in conjunction with the Aggregator to load CSS resources. The plugin delegates to the text plugin for the resource load, which allows it to be used with any AMD loader, with or without the Aggregator. When used with the Aggregator, the text plugin is implemented by the Aggregator, allowing text modules, including CSS, to be aggregated together with JavaScript modules, minimizing the number of HTTP requests needed to load the application. The CSS plugin receives the CSS text from the text plugin, rewrites relative URLs to make them relative to the page, and dynamically inserts a style element containing the module text into the page's <head> element.
Due to the cascading nature of CSS, the order of insertion into the DOM matters, so the CSS plugin guaranties that the order that style elements are inserted into the DOM corresponds to the order that they are requested from the loader. This gives you the ability to manage the ordering of stylesheets by listing the modules in the order that they should be added to the DOM in the dependency lists of the require or define calls that reference them. Since the loader will not request again any module that has already been loaded or requested, there is no penalty in specifying modules that may have already been loaded in a require or define dependency list in order to guarantee order of insertion.
Inlining of image references in CSS can improve web application performance by reducing the number of HTTP requests needed to load the application, but it must be used with care because if mis-used, it can negatively impact performance by bloating the size of the CSS. In particular, image sprites should never be inlined. Image sprites are used to leverage browser caching by allowing multipe images to be loaded and cached with a single HTTP request. Since inlining of image references in CSS reproduces the image data within the CSS each time the image is referenced, it is virtually always better to load image sprites separately than to inline them. The best candidates for inlining are small images that are referenced infrequently. The config properties discussed above are designed to provide enough flexibility in controlling which images will be inlined and which won't so that you can fine-tune the performance of your application. Another consideration when deciding whether or not to make use of image reference inlining is that some older browsers may not fully support inlining of images in CSS files.
Inlining of imported CSS files using the @import directive is provided mostly for legacy code that uses a monolithic CSS file importing all the styles for the application (e.g. dijit theme files such as tundra.css). AMD applications are encouraged to specify styles in module specific CSS files that are 'required' by the JavaScript modules for the widgets that reference those styles.