ASP.NET Core Web 资源打包与压缩

时间 2019-11-09

标签 asp.net asp core web 资源打包压缩栏目 ASP 繁體版

原文原文链接

在ASP.Net中可使用打包与压缩这两种技术来提升Web应用程序页面加载的性能。经过减小从服务器请求的次数和减小资源文件的体积来提升加载性能。css

打包是一地将多个文件（CSS，JavaScript等资源文件）合并或打包到单个文件。文件合并可减小了 Web 资源文件从服务器的所需请求数，这样也可提升页面载入的性能。
压缩是将各类不一样的代码进行优化，以减小请求资源文件的体积。压缩的常见方法删除没必要要的空格和注释，并将变量名缩减为一个字符。

例以下面JavaScript函数：html

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

压缩后，函数简化为以下：git

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

除了删除注释和没必要要的空格以外，参数和变量名称被重命名（缩写）以下：github

本文将介绍使用的打包和压缩的优势，以及如何在ASP.NET Core应用程序中使用这些功能。json

概述

在ASP.Net中可使用打包与压缩这两种技术来提升Web应用程序页面加载的性能。经过减小从服务器请求的次数和减小资源文件的体积来提升加载性能。数组

打包是一地将多个文件（CSS，JavaScript等资源文件）合并或打包到单个文件。文件合并可减小了 Web 资源文件从服务器的所需请求数，这样也可提升页面载入的性能。
压缩是将各类不一样的代码进行优化，以减小请求资源文件的体积。压缩的常见方法删除没必要要的空格和注释，并将变量名缩减为一个字符。

例以下面JavaScript函数：服务器

AddAltToImg = function (imageTagAndImageID, imageContext) {
  ///<signature>
  ///<summary> Adds an alt tab to the image
  // </summary>
  //<param name="imgElement" type="String">The image selector.</param>
  //<param name="ContextForImage" type="String">The image context.</param>
  ///</signature>
  var imageElement = $(imageTagAndImageID, imageContext);
  imageElement.attr('alt', imageElement.attr('id').replace(/ID/, ''));
}

压缩后，函数简化为以下：app

AddAltToImg=function(t,a){var r=$(t,a);r.attr("alt",r.attr("id").replace(/ID/,""))};

除了删除注释和没必要要的空格以外，参数和变量名称被重命名（缩写）以下：ide

原始名称	重命名后
imageTagAndImageID	t
imageContext	a
imageElement	r

此示例来自于github:https://github.com/aspnet/Docs/blob/master/aspnetcore/client-side/bundling-and-minification.md
函数

bundleconfig.json文件

MVC项目模板提供了一个bundleconfig.json配置文件，它定义了打包的配置选项。默认状况下，实现了自定义脚本文件(wwwroot/js/site.js) 和样式表 (wwwroot/css/site.css) 文件的配置。

配置选项详细说明：

outputFileName - 要输出打包包文件的路径。与bundleconfig.json 文件的相对路径。必填
inputFiles - 要打包的的文件路径数组。与是配置文件的相对路径。选填，若是是空数组会输出一个空文件。支持通配符模式。
minify - 输入出类型的压缩选项。选填，默认值 -minify: { enabled: true }
- 输入出文件类型可用配置选项。
includeInProject - 将生成的文件添加到项目。选填， 默认值 - false
sourceMaps - 生成合并文件的源文件映射。选填，默认值 - false

在项目中使用打包和压缩

在VS 2015/2017须要安装BundlerMinifierVsix，安装完成后须要重启VS。

在bundleconfig.json文件右键单击，而后选择任务运行程序资源管理器。

[
  {
    "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
  }
]

在Update all fiels选项右键单击，而后选择Run。

在项目中会分别生成压缩后的资源文件。

在视图中使用打包压缩后的资源文件

在上一篇博客《ASP.NET Core配置环境变量和启动设置》咱们已经讨论过环境变量，在视图中经过 Environment 标签，分别定义开发、预演和生产环境加载对应的资源文件。

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

当在开发模式下运行应用程序，咱们使用未压缩Css和脚本文件；在生产环境中，咱们压缩后的资源文件，这样能够提升应用程序的性能。

总结

在ASP.Net中可使用打包与压缩这两种技术来提升Web应用程序页面加载的性能。但愿上面的内容对你们的学习有所帮助，谢谢！

重命名后

imageTagAndImageID t

imageContext a

imageElement r