How to use the On fly bundles


Hi Again man,
this library is really cool, and i read the on the fly bundle documentation, but i am confused so if you could clear it out for me.
what am i suppose to do exactly?
where i should reference the CSS and Script files with the on the fly Bundle ?
thanks in advanced.
Closed Jun 9, 2012 at 3:01 AM by rushfrisby


rushfrisby wrote Jun 6, 2012 at 3:12 PM

Hi DevMondo,

You should reference them in your page wherever you want the bundle url to be output. If you have a script that is only used on your homepage (say it is at ~/Scripts/HomePage.js) then instead of

<script src="@Url.Content("~/Scripts/HomePage.js")" type="text/javascript"></script>

you would use

<script src="@BundleTable.CompositeUrl(typeof(JsMinify), "~/Scripts/HomePage.js")" type="text/javascript"></script>

DevMondo wrote Jun 7, 2012 at 1:34 AM

thanks alot for the reply man,
but it is not working,
this is what i did
<link href="@BundleTable.CompositeUrl(typeof(CssMinify), "~/Themes/Default/StyleSheet1.css")" rel="stylesheet" type="text/css" />
and the stylesheet1.css file exists,

then i added the module in system.webServer

when i view the source i see this

<link href="/-44786940" rel="stylesheet" type="text/css" />

so the bundler working, but the CSS is not there, if i browse to -44786940 i get 404 error

rushfrisby wrote Jun 7, 2012 at 2:23 AM

What web server are you running this on? I suspect the http module is not working if you get a 404 error. If you are running in IIS6 or Cassini the module has to be added to the httpModules section within the system.web section. For IIS7 and IIS Express then the modules section within system.webServer is the right place.

DevMondo wrote Jun 7, 2012 at 2:46 AM

thanks a lot man, you are right, it was stupid casini, so it is working now,

but i have noticed one thing, when i reference a partial view in the page which has hte same css refrence as the page , the output name is the same here is an example

//refrenced in view
<link href="/-20239988" rel="stylesheet" type="text/css" />

//refrenced in partial view
<link href="/-20239988" rel="stylesheet" type="text/css" />
another thing, can we have control over the naming scheme? for example i want to name the referenced css files in Home page to be home-334343.css

another thing, what is really happening in the inner guts of the Bundler, are these styles and scripts stored in RAM? and does this happen on each request for the page? what i mean is on every request, does the Bundler go through the whole process of comparing files to chech if they are new or not and minifying them then merging them? if so wouldn't this be costly ?

excuse my questions but i love the simplicity of this library and i am starting to replace all my projects with it :)

rushfrisby wrote Jun 7, 2012 at 3:41 AM

Nothing wrong with asking a lot of questions :)

If you reference the same css in your partial view and in your page (or anywhere else) the reference to the minified content will always be the same, this is expected - just as if you referenced StyleSheet1.css in both places.

There is no control over the naming scheme right now but that could be something to add. Good idea!

Yes the content is stored in memory when bundled. This makes serving the content very fast. You are right, reading each file from the disk every time would be bad, so that doesn't happen, unless... your web.config is set to <compilation debug="true">. If this is true then you are probably in the middle of developing, and you will want the bundler to pick up changes on every request. When you put your site into production this should be false though and the bundler will serve content from memory.

DevMondo wrote Jun 7, 2012 at 4:33 AM

awesome attitude man,
i understand completely what you mean now, but when i am in production and and debug is set to false, and i modify the CSS or add new reference, will this be picked up and added to the combination and minification list ? or i must always be in debug mode to do that ?

going back to Partial Views with CSS References in them, if they are requested by AJAX will there be any limitation or the Bundler will work as expected ?

another awesome thing i loved is the Embedding of images in CSS, now i have noticed something weird, in chrome i still see a get request made to the image in network tab, but in IE 9 there is not, is this a bug in Chrome or the Bundler ?

another thing is that i really liked how we can use virtual path in CSS for Images when using Embed, but can we use that when not using Embed, as like you mentioned in the documentation, that after minification and combination the images will be served from root, and this make a big hurdle especially if you are developing a modular system, where CSS can reference images from sub directories in other folders, i think if you can apply the same "Embed" virtual path look up to the normal CSSMinify Type it would be great.
as i see it is a must when you combine CSS from different places.

thanks a lot.

rushfrisby wrote Jun 7, 2012 at 2:25 PM

If you make a change to CSS in production then the bundler will pick it up when the application pool is recycled. You don't need to change the web.config.

There are no limitations if requesting with AJAX.

Can you send me the CSS you are using when embedding the image? Also make sure you are using typeof(CssMinifyImageEmbed).

Good idea about adding virutal path urls in CssMinify. I think I will add it as another type that inherits from CssMinify.

DevMondo wrote Jun 8, 2012 at 1:36 AM

thanks a lot for the reply man,

when you mean when application pool is recycled, is int this problematic? i mean when does application pool restart, suppose that i need to show the client a modification in Design or update instantly, he will not wait for application pool to restart, and if we force it to, then we will loose things like sessions, etc... please correct me if i am wrong as i am not a pro so maybe i am blabbering :)

rushfrisby wrote Jun 8, 2012 at 5:21 AM

If you need to have a css file updated without restarting the app pool then I wouldn't use bundling for that file.

Also you mentioned some stuff that doesn't follow best practices... like changing one file in production. You can get into trouble that way. Normally you would deploy the site all together, at an off peak time. See this for reference: http://www.hanselman.com/blog/WebDeploymentMadeAwesomeIfYoureUsingXCopyYoureDoingItWrong.aspx

Also storing things in the session state should be avoided at all costs - https://www.google.com/search?q=why+session+state+is+bad

Not trying to be harsh just trying to raise awareness. If you do those things it will make your life a lot easier. :)

DevMondo wrote Jun 8, 2012 at 7:19 AM

you are not harsh at all, you actually gave me a very important lesson and i appreciate it totally.

so now i understand it completely, in development i make all the references and then when application is only , the minification and whole pipeline happens once then get stored in application context, right ?

wrote Jun 9, 2012 at 3:01 AM

wrote Feb 13, 2013 at 9:24 PM

wrote May 16, 2013 at 3:23 AM