在 ASP.NET Core 中进行打包 (Bundling) 和紧缩 (Minification)

在 ASP.NET Core 中进行打包 (Bundling) 和紧缩 (Minification)

• Bundler & Minifier for Visual Studio 2019
• Bundler & Minifier for Visual Studio 2022

这篇文章讲介绍在 ASP.NET Core 中进行打包和紧缩操作。 对于 JavaScript 代码和 CSS 代码的打包和紧缩可以提高 ASP.NET Core Web 应用的性能。

什么是打包 (bundling) ?

打包时将多个文件合并为单个文件的过程。例如，我们可以将多个小型的 JavsScript 文件合并为单个 JavaScript 文件以提高下载的性能，对于 CSS 也是如此。更少的文件数量意味着更少的 HTTP 请求数量，可以提高页面加载的性能。

什么是紧缩 (BundlerMinifier) ?

紧缩是在不影响功能的前提下，删除不需要的内容，例如 JavaScript 中的注释，或者将长的变量名称替换为更短的名称的过程。它会删除注释，额外的空白，以及将长的变量名称转换为更短的名称。

内置的 BundlerMinifier 工具

BundlerMinifier 是内置于 VS 2019 中，以扩展形式存在的工具。它可以完全与 ASP.NET Core 项目集成。来处理对于 JavaScript 和 CSS 的打包和紧缩。

VS 2022 中的版本：https://marketplace.visualstudio.com/items?itemName=Failwyn.BundlerMinifier64

Step 1

在 VS 2019 或者 2022 的菜单中选择 Extensions，然后点击 Manage Extensions 菜单项，这样会弹出管理扩展的窗口。

Step 2

在右边的搜索栏中输入 Bundler ，在找到之后，点击下载并安装。

它会要求你关闭 Visual Studio，然后就会启动安装过程。在它提示你修改的时候，点击修改就可以完成。

Step 3

现在重新启动 Visual Studio，打开你的 ASP.NET Core 项目，打开 wwwroot 文件夹，选择准备进行紧缩的文件，右键之后，选择 Bunder & Minifier，选择 Minify File。它就会创建与你的文件同名的紧缩版本，并在项目中生成一个 bundleconfig.json 文件

其中内容为：

[
  {
    "outputFileName": "wwwroot/css/style.min.css",
    "inputFiles": [
      "wwwroot/css/style.css"
    ]
  }
]

这个 bundleconfig.json 文件是标准的 JSON 文件，非常易于理解。在该文件中，每个打包的输出文件名称使用 outputFileName 定义，对应的 inputFiles 表示用来打包的源文件数组。每个数组对应一个输出文件。还可以通过 bundleconfig.json 文件来控制紧缩的过程，包括重命名本地的 JavaScript 文件以及是否为 JavaScript 生成 SourceMap 文件。

如果你不是在 JavaScript 或者 CSS 文件上右键，而是在 bundleconfig.json 文件上右键，那么你会得到更多的功能。

如果你选择了 Enable bundle on build 功能，那么 Visual Studio 就会下载并安装对应的 NuGet 包，如果你还没有安装的话。

参考资料

• https://www.c-sharpcorner.com/article/bundling-and-minification-in-asp-net-core-3-0/