It refers to the process of removing unnecessary or redundant data without affecting how the resource is processed by the browser - e.g. code comments and formatting, removing unused code, using shorter variable and function names, and so on.
It refers to the process of merging resources into one file. The advantage gained is that the number of requests for resources is reduced.
Requirements: Bundler has two dependencies, Microsoft Ajax Minifier and Bundle Transformer: Core.
Installation: Get via NuGet.
Runs at development-time on the file saved, on post-build, or when manually run.
Functions: Compiles, minifies, and combines less, sass, stylus, CSS, CoffeeScript, LiveScript, js.
Bundler is an open-source, cross-platform, command-line runner integrated to Visual Studio vía NuGet that statically compiles, minifies and combines components like less, sass, stylus, CSS, CoffeeScript, LiveScript and js files.
You want to run Bundler when a file your website reference has changed, so you can see those changes before your next page refreshes. Although bundler.cmd is just a simple command-line script, there are a few different ways you can run it during development:
Automatically on save of a .less, .css, .sass, .js, .coffee and .bundle (after the 2010 VS.NET Extension is installed).
Add a Post-Build event to your project to automatically run it at the end of every build.
Add an External Tool in VS.NET that runs bundler.cmd. Optionally assign a short-cut so you can run with 1 key-stroke.
How it works
You define CSS or js bundles (in plain text) which specify the list of files you wish to bundle together. Running bundler.cmd (either as a short-cut key or post-build script) will scan through your /Content folder finding all defined .js.bundle and .css.bundle definition files which it goes through, only compiling and minifying new or modified files.
Now every time you run /bundler/bundler.cmd, it will scan these files, compiling and minifying any new or changed files.
Requirements: .NET framework 3.5.
Installation: Get vía NuGet.
Runs at run-time on IIS.
RequestReduce Makes your website faster - sometimes much faster - with almost no effort.
Auto generates sprites from your background images.
Optimizes Sprite PNG format and compression.
Optimizes caching headers and ETags.
Runs on any IIS web site including Classic ASP and PHP.
Can sync content across multiple web servers.
Works well with CDNs.
Compiles less, sass, and CoffeeScript.
Microsoft Ajax Minifier licensed under Apache 2.0: http://ajaxmin.codeplex.com/
StructureMap by Jeremy D. Miller, The Shade Tree Developer, and Joshua Flanagan licensed under Apache 2.0: http://structuremap.net/structuremap/
nQuant by Matt Wrock licensed under Apache 2.0: http://nquant.codeplex.com.
YUICompressor .NET MSBuild Task
Installation: Get vía NuGet.
Runs on post-build or when manually run.
Functions: Compresses and minifies CSS and Js files.
1 source file -> 1 destination file (that's just compression).
Multiple source files -> 1 destination file (compression and bundling).
Multiple source files -> multiple destination files (so you're pro at this now?!).
Optional MSBuild Tasks, NAnt Tasks, and MVC4 BundleTransform.
ASP.NET Web Optimization
Installation: get vía NuGet
Runs on post-build or when manually run
Functions: compresses and minifies CSS and Js files.
The ASP.NET Web optimization framework provides services to improve the performance of your ASP.NET Web applications.
Current services provided by the framework include:
Bundling – combining multiple scripts or style resources into a single resource, and thereby requiring browsers to make fewer HTTP requests.
Minification – making scripts or styles smaller using techniques such variable name shortening, white space elimination, etc.
Visual Studio Web Essentials Extension
To get Web Essentials extension on your Visual Studio follow the further steps:
Open Visual Studio.
Go to the Tools menu.
Select Extension Manager.
Pick Online Gallery on the left side of the prompt window.
Search for ‘Web Essentials’.
Select Web Essentials on the results and click on the Download button.
Once downloaded and install window will appear, click on the Install button.
When the installation process is completed hit the Restart Now button.
A browser window with the details about the version of the Web Essentials extension installed will open.
JSHint is a very configurable tool that helps developers follow certain guidelines and best practices.
Adds IntelliSense support on JS files.
Creates a minified version of any JS file in Solution Explorer to produce a *.min.js file. Whenever the source .js file is changed, the .min.js file is updated accordingly.
Adds IntelliSense support to CSS files.
Adds visual cues live.
Converts color formats, DataURIs, and background Images.
Creates a minified version of any CSS file in the Solution Explorer or a section of the CSS.
Select any two CSS or JS files and bundle them into a single merged file which also creates a minified version of the code. The most interesting part is that developers can modify the sources of the bundle and all changes will be reflected down to the .min file which means that we only need to reference this file on the HTML code. This reduces significantly the load time of the web pages.