ASP.NET Core 2

Bundling and Minifying In ASP.NET Core Applications

Bundling and Minification are two distinct performance optimizations you can apply in a web app. Used together, bundling and Minification improves performance by reducing the number of server requests and reducing the size of the requested static assets.

Bundling combines multiple files into a single file. Bundling reduces the number of server requests that are necessary to render a web asset, such as a web page.

Minification removes unnecessary characters from code without altering functionality. The result is a significant size reduction in requested assets (such as CSS, images, and JavaScript files).

An Easier Way - The Bundler and Minifier Extension, Following Steps:
1.      Go to the Visual studio >
2.      Go to the Extensions (near to visual studio tool)
3.      Go to the Manage Extensions
4.      Now, Install the Bundler and Minification
5.      After successfully installed
6.      Add a new JSON file, named bundleconfig.json, to the MVC or Razor Pages project root. Include the following JSON in that file as a starting point.

If you want to minify the bundle, then you need to indicate this within the bundleconfig.json file. Simply add a minify block like the following to your existing bundle to indicate that you want it minified.

bundleconfig.json file look like -
 [
  {
    "outputFileName": "wwwroot/output/yourcss.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap.css",
      "wwwroot/lib/bootstrap-datepicker.css"
    ]
  },
  {
    "outputFileName": "wwwroot/output/yourcustomejs.min.js",
    "inputFiles": [
      "wwwroot/js/yourjsfile.js",
      "wwwroot/js/yourcommonjs file.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": true
  },
  {
    "outputFileName": "wwwroot/output/jqbundle.min.js",
    "inputFiles": [
      "wwwroot/lib/jquery.js",
      "wwwroot/lib/bootstrap.js",
      "wwwroot/lib/bootstrap-datepicker.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

The bundleconfig.json file defines the options for each bundle.

Important 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 that you take that into account.

Configuration Options Include:
1.      outputFileName: The name of the bundle file to output. Can contain a relative path from the bundleconfig.json file. required
2.      inputFiles: An array of files to bundle together. These are relative paths to the configuration file. optional, *an empty value results in an empty output file. globbing patterns are supported.
3.      minify: The minification options for the output type. optional, default - minify: { enabled: true }
4.      includeInProject: Flag indicating whether to add generated files to project file. Optional, default - false
5.      sourceMap: Flag indicating whether to generate a source map for the bundled file. optional, default - false
6.      sourceMapRootPath: The root path for storing the generated source map file.

Finally add this bundle file on Your MVC View/HTML View,
    <link rel="stylesheet" href="~/output/yourcss.min.css" />
    <script type="text/javascript" src="~/output/yourcustomejs.min.js"></script>

Additional resources -
https://docs.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-3.0&tabs=visual-studio
ANIL SINGH

Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^