Bundling and minification in Aspnet Core MVC

Static files should be bundled and minified, and forced to be updated by the browser (not cached) when content changes.

Bundle and minify them

To bundle and minify js and css files, add bundleconfig.json file to the project root folder

 [
    {
        "outputFileName": "wwwroot/css/site.min.css",
        "inputFiles": [
        "wwwroot/css/site.css"
        ]
    },
    {
        "outputFileName": "wwwroot/js/site.min.js",
        "inputFiles": [
        "wwwroot/js/site.js"
        ],
        "minify": {
        "enabled": true,
        "renameLocals": true
        },
        "sourceMap": false
    }
]

Load them

Add the reference to the page

<!DOCTYPE html>
    <html lang="en">
    <head>
        .................
        <link rel="stylesheet" href="~/css/site.css" />
    </head>
    <body>
        
        <footer>
            .......
        </footer>

        <script src="~/js/site.js" asp-append-version="true"></script>
    </body>
</html>

Refresh them in the browser if they change.

Note the tag asp-append-version="true". Adds versioning so when the content changes the browser caching doesn’t prevent from downloading new versions.