Bundling css and js files
<sensenet> <portalSettings> <add key="AllowCssBundling" value="true" /> <add key="AllowJsBundling" value="true" /> ...
It is possible to make exceptions if bundling is enabled. This means you can make a 'blacklist' of js and css folders or individual files that you do not want to be bundled.
<sensenet> <portalSettings> <add key="JsBundlingBlacklist" value="/Root/Global/scripts/yourfolder/;/Root/Global/scripts/plugins/yourplugin/yourfile.js" /> <add key="CssBundlingBlacklist" value="" /> ...
You can also disable bundling for individual CSS files in html:
<sn:CssRequest Path="$skin/styles/style1.css" AllowBundling="false" ID="style1" runat="server" />
How it works
New since Sense/Net 6.3
- Data URIs. Small image files will be incorporated into CSS code through the use of data URIs in order to reduce the number of HTTP requests.
- Most of the built-in ASP.NET script resources (ScriptResource.axd and WebResource.axd) will be added to the bundle. At the time of this writing, Sense/Net does this by sending HTTP requests to itself to get the content of these resources.
The bundling support for Sense/Net was implemented with important performance considerations in mind, in order to minimize the processing time spent on the server.
We have done this to ensure that this feature is as performant and fast as possible.
Advanced details for developers and experts
- The Sense/Net server side will always set the Last-Modified HTTP header for all bundles served. This will allow clients to send If-Modified-Since headers for their subsequent requests to the same bundle. When this happens, Sense/Net will send a HTTP 304 "Not modified" response. This saves a lot of bandwidth and reduces the CPU time required on the server for processing such requests.
- Automatic compression. If the client sends a HTTP Accept-Encoding header and it accepts gzip and deflate compression, Sense/Net will automatically send the bundled content using the specified comression method.
- Caching support. Sense/Net will cache its generated bundles on the server side (as mentioned above). In addition to this, every proxy server and client is also expected to cache them.
CSS relative URLs and @import directives
Sense/Net will automatically replace all relative URLs in your CSS files to absolute URLs when it bundles them together. It also supports the CSS @import directives when bundling CSS files. Local CSS files which reside in the Content Repository will be automatically recursively expanded into the bundled CSS code, and non-local imports will be put to the top of the CSS. (As per the CSS standard, @import directives may only appear at the top of a CSS document.)
CSS media types
The CssRequest control also allows you to set the media type of the given CSS files. (This is rendered into the 'media' attribute of the resulting link tag.) Sense/Net will create one bundle per CSS media type, thus giving you the ability to utilize the power of bundling and the ability to distinguish your CSS by media types too.
Limitations of the technology
Versions before Sense/Net 6.3 used to be incapable of incorporating the ScriptResource.axd and WebResource.axd script references into their bundles. This has been fixed in the 6.3 release.
There are no examples for this article.