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.

Using this extension, we can automate the bundling and minification process. This extension is integrated with Visual Studio 2015 & 2017. It allows us to select and bundle the files that we need without writing a single line of code.

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

[

{

"outputFileName": "wwwroot/js/site.min.js",

"inputFiles": [

"wwwroot/js/test1.js",

"wwwroot/js/test.js",

"wwwroot/js/test2.js"

]

}

]

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.

[

{

"outputFileName": "wwwroot/js/site.min.js",

"inputFiles": [

"wwwroot/js/test.js",

"wwwroot/js/test1.js",

"wwwroot/js/test2.js"

],

"sourceMap": true

}

]

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.

Support for Command line

This extension also allows us to bundle and minify files using command line. Following commands are supported

dotnet bundleThis command executes all the bundled command that were defined in bundleconfig.json file for minifying and bundling specific files.

otnet bundle cleanThis command clears all the existing output files from the disk

dotnet bundle watchIt creates a watcher which will automatically run the "dotnet bundle" commnad when any input file define in the bundleconfig.json is changed.

dotnet budle helpIt displays the available help options.

Summary

Using this extension, we can bundle and minify the JavaScript, CSS and HTML without written any code. This extension also supports command line and we can also bind the bundle and minify commands with any Visual studio event.