ASP.NET Web Optimization - Minification without bundling - asp.net-mvc

Is it possible to use ASP.NET Web Optimization for minification without bundling?
Lets say I have a page Example.cshtml and corresponding javaScript file for that page Example.js. I would like to be able to do something like #Scripts.Render("~/Scripts/Views/Example.js") which will product minified file when not in debug mode. I could of course maintain many single JavaScript file bundles to do this but it seams like unnecessary chore.
Of course there are other solutions for javaScript compression but I think that single approach with run-time compression is the best way to go.

You would have to create a bundle with just one file to accomplish this currently.

Related

.NET 4.5 System.Web.Optimization bundling use on CDN

I'm building a CDN, and looking for a ways to utilize .NET minification/bundling mechanism (System.Web.Optimization) there.
The question is how can I return minified bundle from MVC controller.
Note: I'm looking to use native .NET 4.5 capabilities, I do not want 3rd party solutions.
I'm only looking for ways to utilize this on CDN side. Not on client application side.
Additional question: If the above is possible at all, please explain how can I take advantage of caching, which is normally achieved through adding unique query string parameter to request.
The asp.net bundling and minification uses WebGrease internally.
Grab it off nuget and add just start using it. It looks like the codeplex site doesnt have any examples on there so you will need to look at the source code or download/decompile the asp.net source code to see how they use it.
For the query string parameter I believe that is mainly to prevent/aid client side caching it doesnt neccessarily have anything to do with your server side.
You haven't said how you plant to serve up the JS files from your custom CDN so I can't help much with the caching, I would highly suggest not serving them through mvc though, there will be a lot of extra things happening in the pipeline that you dont really need if all you're doing is serving static files.
Perhaps look at having some process that parses the files and sticks them in a certain directory that IIS can serve directly without delegating to asp.net

What is the benefit of ASP.NET bundling and minification in runtime?

I understand how to use asp.net's new bundling and minification features. They are helpful during development.
Is there any benefit to using them in a production deployment though? Would the system perform better if you just placed the bundled/minified files on the web server? It seems that overall, less code would run if they were just static files.
Note: I understand the benefit of having js/css bundled and minified. I am only questioning the value of using an active runtime process to generate those files in a production system as opposed to simply storing them on disk and referencing them as static files.
Bundling and Minification is more useful in production than in development.
It can significantly improve your first page hit download time.
Bundling reduces the number of individual HTTP requests to server by combining multiple CSS files and Javascript files into single CSS file and javascript file.
Minification reduces the file download size of CSS and javascript files by removing whitespace, comments and other unnecessary characters.
Such small advantages are more pronounced in a production environment than in development. So it is better to go with Bundling and Minification in production.
Specific to your question there is no palpable benefit in bundling/minification during runtime. This feature is there just to make the developer's work easier. So it is even better to go with manually bundled/minified assets in production if you are sure about what you are doing.
Update:
According to MSDN there is a real benefit in bundling/minification during runtime
Bundling and minification in ASP.NET 4.5 is performed at runtime, so that the process can identify the user agent (for example IE, Mozilla, etc.), and thus, improve the compression by targeting the user browser (for instance, removing stuff that is Mozilla specific when the request comes from IE).`
The power of dynamic bundling is that you can include static JavaScript, as well as other files in languages that compiles into JavaScript.`
For example, CoffeeScript is a programming language that compiles into JavaScript
Bundling and minification provide 2 basic functionality in order to improve the performance of page load.
Bundling - Bundle all the provided scripts/ CSS in one file so that only browser need to load one file instead of multiple.
Note-> Generally browsers can may only 6 simultaneous requests to get resources from the server. Additional requests are queued by the browser for later processing. Hence, if we have multiple files then it may have to wait in the request queue.
Minification - Minification process generates a minified file by removing comments, extra white spaces and renames the variable names. So this reduces the file size and results in faster download.
Minification- smaller files, less kb on the wire, faster page load.
Bundling- browsers limit connection per http host. This means that a user goes to your page, and you have (let's say) 24 script and link (css) tags, your browser is handling them 6 (most browser's limitation) at a time - slowing the page load.
Bundling makes the browser treat all your files a single file - overriding this limitation.
Another benefit of bundling is it reduces caching issues. When we use bundling its loading to the page with a key, like below.
<script src="/bundles/jquery?v=FVs3ACwOLIVInrAl5sdzR2jrCDmVOWFbZMY6g6Q0ulE1"></script>
Each time we change our scripts it generates different key. So the file will be cached if we change something. But when we don't use this since script file has the same name, sometimes we have to clear cache to see the change.

Dump my MVC site to static files

I want to build a simple site with MVC but then render the "pages" and corresponding "assets" (js, css, images, etc) to what one might call a "static site".
In other words, I don't want to deploy to an IIS server that supports MVC. I simply want to build the site in MVC then somehow parse those pages into static html/css/etc files and upload the site to a regular LAMP host.
Is there an easy way to automate this? NuGet package? Binary? MVC extension like maybe a handler add-on that can render out the static site in a single pass?
About 10 years back, I used to download whole websites for offline use using HTTrack Website Copier. May be you could download your own website which gives you nice hierarchy of your static web pages. If you think all your webpages are reachable through the homepage links, menu links etc then you can download most of your website. Basically you can google for web crawlers/ offline browsers/website downloaders etc. and run them to get your job done.
Alternatively if you know the pattern of urls, you could give it to download manager to download them. Not sure if it works with your website, but I do it sometimes.
HTH
If your site depends on a database or some other dynamic source it will be close to impossible to dump all possible combinations of pages into static files. If on the other hand your site is pretty much static, saving the rendered HTML/JS/CSS source into files and uploading it to a LAMP server won't be too hard.
You may wanna look at Pretzel, a .Net static site generator.
Update: Apparently it doesn't work on ASP.Net projects: Issue #123. It only supports Razor language for authoring content pages.
If the reason for doing this is performance related why not just use output caching and the like, that way the pages will be extremely fast (you could set the cache timeout to a very long period of time) and you don't need to run some tool to do the conversion and have to store your html separate to your source code.
Of course you will still need to run IIS/.net
You have three options:
Create your website using plain html, css, jquery and images. You can use Visual Studio Code as IDE to create the files. One issue might be to manage common header/footer for your website. But you can solve it by injecting html header/footer using jquery.
Use a CMS (content management system) like Umbraco to host your static site. Umbraco indexes and caches pages to improve performance. You have great control on what to publish on your website etc.
Create the website using .Net + MVC and use tools like HTTrack to download a static copy of the website. You can even automate the process using commands and triggering it after every deployment or build etc.

Combine, minimize and gzip for CSS and JavaScript files for ASP.NET MVC

Good day!
I'm looking for solution to combine, minimize and gzip CSS and JavaScript files. It seems they come in two forms:
In form of ASP.NET handler\module with processing files on the fly (with caching results)
In form of VS build tasks (to perform processing while building)
Generally I'm ok with either.
I've looked on a number of solutions (and I use ASP.NET handler from this article http://www.codeproject.com/KB/aspnet/httpcompression.aspx a lot), but maybe something "must have" came out and I've missed it.
Thanks in advance!
Here's my advice to you: use build tasks and HTTP cache the output.
In terms of build tasks, you'll want to check out your favorite JavaScript minifier (my favorite is Google Closure Minifier) that has a command line utility that you can just plug into your project file, MSBUILD file or NANT file. Same deal with CSS (I personally use Yahoo! YUI Compressor). If you're into using LESS, you can certainly combine this with the YUI compressor. To optimize images, I'd use optipng. There's directions on how these guys work on their individual sites.
Now, after you have these files all nice and optimized, you'll want to output them using a handler or controller action for MVC. To set the expiration so that subsequent requests will default to the file downloaded on the first request, you'll want this to run in your code:
Response.ExpiresAbsolute = DateTime.Now.AddYears(1);
More than likely you'll want a cache-buster strategy so that you can change the content files. You'd do this by passing a random parameter to your handler. There are a few different ways to go about this... just Google it.
Hope this helps.
I'm using the telerik mvc components for small-medium sites. It was simple to add and configure with NuGet.
Moth can (among other things) handle all your javascript / css requests on the fly. See Wiki: Javascript.
Best of all, it can also put all javascript at the bottom of the page, including parts you write in your partial views! Wiki: Inline script.

Why are there so many javascript files in my empty MVC 2 project?

When creating an empty MVC 2 project, I have a lot of javascript files in my Scripts folder. Why? Will removing them affect my application?
No removing them won't affect anything, unless they are being used in pages. However you said this is an empty MVC project so you'll be fine.
They're there for you to use, to make your life easier. For example, JQuery is included.
Take for example JQuery file, It provieds functions which has solutions for crossbrowser related issues which makes developement easy. Similarly other files has functions whcih are providing readymade functionalities which can be used for rapid developement.
Unfortunatly as JS is traveling to browsers its downloaded on the client. Its suprising for not JS people as its not like .NET api where one or more dll is sufficient for all the api and developer dont have to worry(some times :)) about from where they are coming.
I will suggest you to study included JS files and include/use only those which you really wanted to use.

Resources