find and solve || findandsolve.com
Please wait.....

Welcome back.






Before Read Terms of use

How to use Buildbundlerminifier and add bundle config in asp.net core

How to use Buildbundlerminifier and  add bundle config in asp.net core

Bundling

In ASP.NET,ASP.NET bundling is the process of wrapping multiple files to create a single one(file).
It is created as to minimized the resources in case of browser’s call.
Bundling easily combines multiple files to make a single.

Minification

Minification performs a variety of different code optimizations to scripts or css such as removing of all unnecessary characters like extra spaces, comments, new lines unnecessary white space and comments and shortening variable names to one character. Consider the following JavaScript function .
AddAltToImgage = function (imageTagAndImageID, imageContext) {
    ///<signature>
    ///<summary> Adds an alt tab to the image
    // </summary>
    //<param name="imgElement" type="String">The image selector.</param>
    //<param name="ContextForImage" type="String">The image context.</param>
    ///</signature>
    var imageElement = $(imageTagAndImageID, imageContext);
    imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}
After minification, the function is reduced to the following:
AddAltToImg = function (n, t) { var i = $(n, t); i.attr("alt", 
i.attr("id").replace(/ID/, "")) }
In the given above code the comment and unnecessary whitespace are removed.
The following parameters and variable names were renamed (shortened) as below

OriginalRenamed
imageTagAndImageIDn
imageContextt
imageElementi
When to apply bundling

A. Having many common JavaScript/CSS files used throughout the application
B. Too much loading time by JavaScript/CSS files in use in a page

Create an Empty ASP.NET Core Web Project              

Step 1
I am going to create a new Project in ASP.NET Core 3.1 as given below


When Clicking Create button, the project will show as given below.


Set 2
Add the buildbundlerMinifier package from the web project directory 
$ dotnet add package BuildBundlerMinifier

Or

You can add BuildBundlerMinifier package manually as given below


The project I have created is BundlingExample.csproject and Install BuildBundlerMinifier package. If you take a peek in BundlingExample.csproject, you will see the package reference to BuildBundlerMinifier.The version number may be different depending on when you add the package.

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp3.1</TargetFramework>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="BuildBundlerMinifier" Version="3.2.449" />
  </ItemGroup>

Set 3

Add bundleconfig.json file in your project as given below.



In my example, I have add two css files, style1.css and style2.css, and two js files example1.js and example2.js. These will be bundled and minified into two files, css.min.css and js.min.js, respectively. You can play around with these settings, and as you can see, the bundleconfig.json file is really intuitive.

After Added css file,Looks like the project as given below


Open your bundleconfig.json file and past the code as given below.
[

  {
    "outputFileName": "wwwroot/css/css.min.css",
    "inputFiles": [
      "wwwroot/css/style1.css",
      "wwwroot/css/style2.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/js.min.js",
    "inputFiles": [
      "wwwroot/js/example1.js",
      "wwwroot/js/example2.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]
And build the project. After successes build, the project create two file js.min.js and css.min.css



Output




                                        

Mahira  khanna

Mahira khanna

I have the skills you need for you company blog, website, or other content materials

Comments



Report Response