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