Simplifying IT, Empowering Businesses

Building high-performance and responsive web applications are important for a developer. It allows the developer to showcase their ability to build dynamic solutions and ensure a seamless customer experience.

We have transitioned from simple HTML pages to more complex pages with a variety of dynamics added with different business logic. Developers utilize two development concepts for building performant web applications;

• Bundling
• Minification

In this guide, we will explain how to implement these development techniques in ASP.NET Core 3.0, starting with an overview of the same.

What is Bundling?

Bundling means to build a bundle, and when taken in terms of development, the meaning sticks. Bundling includes integrating or combining different files into a single file. These bundles have been created in CSS, JavaScript, and other similar technologies.

The purpose of bundling is to reduce the burden on the processing speed. Fewer files mean fewer HTTP requests, which improves page performance. In Bundling, developers can build different bundles for CSS, JavaScript, third-party plugins, scripts, styles, etc.

What is Minification?

The purpose of minification is to make the code cleaner and tidy. The process herein includes removing unnecessary spaces, comments, characters, and so on. These elements increase the code and file size, but effectively removing them improves the code structure without affecting functionality.

To execute these functions, the developers can use the BundlerMinifier tool in Visual Studio. The BundlerMinifier works as an extension. The functionality of the tool is simple, effective. And It will integrate with an ASP.NET Core project, which is our primary topic today.

Here’s the Process to Use the BundlerMinifier Extension;

Step 1: Open Visual Studio 2017 or 2019 and navigate to Extensions followed by selecting Manage Extensions.

Step 2: When a new window opens, go to Search BundlerMinifier. Download & Install it, followed by restarting the Visual Studio software. In search type bundler & minifier, click on download and install. It will ask you to close Visual Studio and then install the extension. Once installed, click on Modify to start using the extension.

Step 3: Open Visual Studio after installing the extension and open the project you want to work on. Once opened, click on the www-root folder and select the CSS file that you want to minify or bundle.

Right-click on the file and select Bundler & Minifier. From the pop-up that shows click on Minify file, you will have a minified file with no unnecessary spaces, comments, etc.

At the same time, you can also generate a bundleconfig.json file in your project.

[  
 {  
  "outputFileName": "wwwroot/css/style.min.css",  
  "inputFiles":[  
  "wwwroot/css/style.css"  
	    ]  
 }  
]  

The bundleconfig.json file is a standard JSON file. It is easy to understand as every bundle in the file is named as with the “outputFileName” field, and the “inputFiles” to be bundled into that output are simply an array of files.

In every array generated, there is one file. Within the bundleconfig.json file, you will get options to initiate the minify process. In addition to this, you can also rename the locals for JavaScript files and create a SourceMap file for the JavaScript file. 

To start the bundling process right click on the bundleconfig.json file instead of the JavaScript or CSS file. Herein you will find additional options, including Task Runner Explorer and Enable Bundle on Build.

If you click the ‘Enable bundle on build’ context menu item, then Visual Studio will download an additional NuGet package that has not already installed.

Conclusion

When both techniques implement in the development environment, it makes building a solution easier. That’s not all; with the Bundler and Minification working together, a developer can create smoother and high-performance solutions for the end-users.