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

Introduction

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.

In my previous article, “Bundling And Minification In ASP.NET Core”, I explained how to perform bundling and minification using gulp command and task runner. In this article, I will explain how to do bundling and minification using Visual Studio extension: Bundler & Minifier.

 

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.

 

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 

[
  {
    "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 bundle
  This command executes all the bundled command that were defined in bundleconfig.json file for minifying and bundling specific files.
  
   

• otnet bundle clean
  This command clears all the existing output files from the disk
  
  

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

• dotnet budle help
  It 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.