In this article, we will learn:

• What is Bundling and Minification in ASP.net Core?
• Bundler and Minifier Extension
• How to Bundle your files
• How to minify your Bundles
• How to automate Bundling and Minification for your project
• Dotnet bundle command : BundlerMinifier.Core

What is Bundling and Minification in ASP.net Core?

Bundling and minification are two techniques you can use in ASP.NET to improve page load performance for your web application

Bundling is a technique to combine multiple files into a single file.

Minification is a technique to perform a variety of different code optimizations to scripts and CSS.Bundling and Minification is used to enhance/improve performance of your web application.
 

Bundler and Minifier Extension:

Visual studio provides an extension, that allows you to easily select and bundle the files you need without writing a line of code.You can install the extension from here.

Some of the current features are as follows:

• Bundles CSS, JavaScript or HTML files into a single output file
• Saving a source file triggers re-bundling automatically
• Support for globbing patterns
• MSBuild support for CI scenarios supported
• Minify individual or bundled CSS, JavaScript and HTML files
• Minification options for each language is 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

• After the installation of the extension, you can select all of the specific files that you want to include within a bundle and use the Bundle and Minify Files option  from the extension.
• Name your bundle and save it at your preferred location.
• Bundleconfig.json file will be created within your project.
• The order in which the files are selected will determine the order which they appear within the bundle.

NOTE: The order in which the files are selected will determine the order that they appear in within the bundle, so if you have any dependencies, ensure you take that into account.

Minifying your Bundles:

After Bundling files now we can minify it by adding a minify block in our existing bundle. Below is the example of it.

Automate Bundling & Minification for your project:

Instead of doing it manually, we can even automate the process. To automate the process all we have to do is schedule a task to run whenever our application is built to ensure that our bundles reflect any changes within our application.

Here are the steps to perform it:

• Open the Task Runner Explorer (via Tools > Task Runner Explorer).
• Right-click on the Update All Files option below bundleconfig.json.
• Select your preferred binding from the Bindings context menu.

The Dotnet Bundle Command: BundlerMinifier.Core

Microsoft introduced a new Bundling and Minification tool, BundlerMinifier.Core,that can be easily integrated into existing ASP.NET Core applications and doesn’t require any external extensions or script files.

How to use BundlerMinifier.Core Tool:

You need to add a reference to BundlerMinifier.Core within the tools section of your existing project.json file as seen below:

Configuring Your Bundles:

After adding the tool, you need to add a bundleconfig.json file in your project that will be used to configure the files that you wish to include within your bundles.

Creating / Updating Bundles:

After your bundles have been configured, you can bundle and minify your existing files using below commands:

Available Commands:

Automated Bundling:

The Bundling and Minification process can be automated as part of the build process by adding the dotnet bundle command in the precompile section of your existing project.json file: