Bundling And Minification Using Visual Studio Extension In ASP.NET Core

Bundling is a way or technique to combine multiple JavaScript or CSS files into a single file. Minification is a technique to reduce the size of the file by removing white space and commented code. Both Bundling and Minification are used to improve the performance of our web application by reducing the number of requests to the Server and reducing the size of the requested assets, such as JavaScript and CSS files.

This extension has the following features.

• Bundles CSS, JavaScript, or HTML files into a single output file.
• Minify individual or bundled CSS, JavaScript, and HTML files.
• Saving a source file triggers re-bundling automatically.
• Support for globbing patterns.
• MSBuild support for CI scenarios supported.
• Minification options for each language are customizable.
• Shows a watermark when opening a generated file.
• Task Runner Explorer integration.
• Command line support.
• Shortcut to update all bundles in solution.
• Suppress output file generation.
• Convert to Gulp.

Once installation of this extension is completed, we can select file(s) that we want to include within bundle and minified. Using "Bundle and Minify files" option of the extension, we can perform bundling and minification.

This extension created the bundleconfig.json file and stored it as configuration. The bundleconfig.json looks as follows.

bundleconfig.json

1. [
2. {
3. "outputFileName": "wwwroot/js/site.min.js",
4. "inputFiles": [
5. "wwwroot/js/test1.js",
6. "wwwroot/js/test.js",
7. "wwwroot/js/test2.js"
8. ]
9. }
10. ]

To minify any JavaScript, CSS or HTML file, right click on that file in solution explorer and select Bundling & Minifier >> Minify File. It will create a [filename].min.[extension]. Here, when original file is modified, the new min file is automatically updated.

Update all bundles

We can run all bundles defined in bundleconfig.json files in the solution by clicking "Build >> Update All Bundles" or using shortcut key "Shift + Atl + l".

Generate Source maps file

A .map file is produced after producing .min.js file automatically. We can create this map file on subsequent minifications. To enable generating source map, we need to assign property "sourceMap" to true in bundleconfig.json file.

1. [
2. {
3. "outputFileName": "wwwroot/js/site.min.js",
4. "inputFiles": [
5. "wwwroot/js/test.js",
6. "wwwroot/js/test1.js",
7. "wwwroot/js/test2.js"
8. ],
9. "sourceMap": true
10. }
11. ]

Execute the bundle using Task runner

We can also execute a bundle using Visual Studio Task Runner. Task Runner is located at Tools menu in VS 2015. When you open task runner, it shows bundles under the bundleconfig.json node.

From the Task Runner, we can either the run the bundle or bind it with visual Studio event, so that bundle runs automatically when any event happens.

Suppress output file generation

As explained, this extension is listening for the file changes and generating bundled and minified files. In some cases, we do not want this. To do this right click on "bundleconfig.json" file and select/unselect "Produce Output Files" option.

Convert to Gulp

This extension also allows us to move onto gulp with an existing project. It will create package.json and gulpfile.js if they do not exist.