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

这篇文章讲介绍在 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 文件上右键，那么你会得到更多的功能。