Posted by Anuraj on Wednesday, December 20, 2017
This post is about enabling bundling and minification in ASP.NET Core with Smidge. Long back I wrote a post about bundling and minification in ASP.NET Core. But it was during the compile time or while publishing the app. But Smidge helps you to enable bundling and minification in runtime similar to earlier versions of ASP.NET MVC.
First you need to create an ASP.NET Core MVC project. For managing the client side dependencies of this project, I am using
yarn package manager. Here is my package.json file.
You can run
yarn install --modules-folder ./wwwroot/libs command to install the packages to libs folder under wwwroot.
Once it is done, you need to add reference of
Smidge library to your project, you can do this using
dotnet add package Smidge command. When the reference is added, you need to configure
Smidge, you need to add the following entry to the config file.
This version number is appended to the bundled scripts and stylesheets.
Next you need to add the Smidge to services, you can do it like this.
Next you need to configure the files for bundling and minification. You can do this in
Configure method like this.
Now add the Smidge tag helpers to your
_ViewImports.cshtml file like this.
For rendering the script and styles you can modify the
_layout.cshtml like this
The bundle file name (app-styles) in the
UseSmidge should be used as the reference. Now you can run the application to view the output, it will be like this.
It is working fine, but I don’t want to do enable bundling and minification in development mode, I want it only in Production and Staging environment. This issue can be solved by the environment tag helper from ASP.NET Core. So in the
_layout.cshtml file you can do something like this.
So in the development environment, it will render something like this.
Actual files without minification, and in production or staging environment it will render the bundled and minified version.
So if you’re moving from ASP.NET MVC project to ASP.NET MVC Core, Smidge is a recommended solution that the other providers, because it is quite similar to the bundling and minification solution which was used in ASP.NET MVC 5.
Happy Programming :)