Bundling in ASP.NET Core 2.2 MVC dev vs prod environments

问题

I am setting up my application to bundle css and js files when not in development, and not bundle when in development.

To do that I first have a bundleconfig.json file:

[
  {
    "outputFileName": "wwwroot/css/bundle.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/bootstrap.min.css",
      "wwwroot/lib/jqueryui.jquery-ui.min.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/bundle.min.js",
    "inputFiles": [
      "wwwroot/lib/jquery/jquery.min.js",
      "wwwroot/lib/jqueryui/jquery-ui.min.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.bundle.js"
    ]
  }
]

Then in my page I have a head tag:

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewBag.Title</title>
    <environment exclude="development">
        <link rel="stylesheet" href="~/css/bundle.min.css" asp-append-version="true" />
        <script type="text/javascript" src="~/js/bundle.min.js" asp-append-version="true"></script>
    </environment>

    <environment include="development">
        <link rel="stylesheet" href="~/lib/bootstrap/bootstrap.css" asp-append-version="true" />
        <link rel="stylesheet" href="~/lib/jqueryui/jquery-ui.css" asp-append-version="true" />

        <script type="text/javascript" src="~/lib/jquery/jquery.js" asp-append-version="true"></script>
        <script type="text/javascript" src="~/lib/jqueryui/jquery-ui.js" asp-append-version="true"></script>
        <script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.bundle.js" asp-append-version="true"></script>
    </environment>
</head>

This all works fine. I'm just not a fan of the fact that I have to duplicate the list of files in the budingconfig.json and in the development environment tag in the header.

In WebForms project I can use <%: Scripts.Render("...") %> and it will generate links for each item in the bundle if in development mode, and it will generate 1 link for the bundle if not in development mode. Is something like this available in .net core MVC projects as well?

回答1:

There is no build-in way to do this in ASP.NET Core. However it is pretty straight forward to roll your own.

Mad Christensen has build an unpacker for MVC5 and here is a gist that adapts it to .NET Core.

You use it like this:

<environment names="Development">
    @Bundler.Unpack(HostingEnvironment.ContentRootPath, "/js/site.min.js")
</environment>

However, if you have no specific reason to include each file other than debugging you can also rely an sourcemaps. There is a flag in the bundleconfig for this. ( "sourceMap": true )

回答2:

You can try a TagHelper like the following

https://github.com/meziantou/Meziantou.AspNetCore.BundleTagHelpers

That will help you what you want to achieve. Instead of writing following type of code

<environment names="Development">
    <link rel="stylesheet" href="~/css/site1.css" />
    <link rel="stylesheet" href="~/css/site2.css" />
    <link rel="stylesheet" href="~/css/site3.css" />
</environment>

<environment names="Staging,Production">
    <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>

You can only write this:

<bundle name="wwwroot/css/site.min.css" />

In production, it uses the minified file and appends the version in the query string (same behavior as asp-append-version).
In development, it uses all input files and does not append version.

来源：https://stackoverflow.com/questions/57225528/bundling-in-asp-net-core-2-2-mvc-dev-vs-prod-environments

标签

asp.net-mvc

asp.net-core

bundling-and-minification