快捷導(dǎo)航

ASP.NET Core Web資源打包與壓縮技術(shù)介紹

更新時(shí)間：2022年02月21日 09:53:14 作者：Sweet-Tang

這篇文章介紹了ASP.NET Core Web資源打包與壓縮技術(shù)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

概述

在ASP.Net中可以使用打包與壓縮這兩種技術(shù)來(lái)提高Web應(yīng)用程序頁(yè)面加載的性能。通過(guò)減少?gòu)姆?wù)器請(qǐng)求的次數(shù)和減少資源文件的體積來(lái)提高加載性能。

打包是一地將多個(gè)文件（CSS，JavaScript等資源文件）合并或打包到單個(gè)文件。文件合并可減少了 Web 資源文件從服務(wù)器的所需請(qǐng)求數(shù)，這樣也可提高頁(yè)面載入的性能。
壓縮是將各種不同的代碼進(jìn)行優(yōu)化，以減少請(qǐng)求資源文件的體積。壓縮的常見(jiàn)方法刪除不必要的空格和注釋?zhuān)⒆兞棵s減為一個(gè)字符。

例如下面JavaScript函數(shù)：

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/, ''));
}

壓縮后，函數(shù)簡(jiǎn)化為如下：

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

除了刪除注釋和不必要的空格之外，參數(shù)和變量名稱(chēng)被重命名（縮寫(xiě)）如下：

原始名稱(chēng)	重命名后
imageTagAndImageID	t
imageContext	a
imageElement	r

此示例來(lái)自于github:https://github.com/aspnet/Docs/blob/master/aspnetcore/client-side/bundling-and-minification.md

bundleconfig.json文件

MVC項(xiàng)目模板提供了一個(gè)bundleconfig.json配置文件，它定義了打包的配置選項(xiàng)。默認(rèn)情況下，實(shí)現(xiàn)了自定義腳本文件(wwwroot/js/site.js) 和樣式表 (wwwroot/css/site.css) 文件的配置。

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

配置選項(xiàng)詳細(xì)說(shuō)明：

outputFileName - 要輸出打包包文件的路徑。與bundleconfig.json 文件的相對(duì)路徑。必填
inputFiles - 要打包的的文件路徑數(shù)組。與是配置文件的相對(duì)路徑。選填，如果是空數(shù)組會(huì)輸出一個(gè)空文件。支持通配符模式。
minify - 輸入出類(lèi)型的壓縮選項(xiàng)。選填，默認(rèn)值 -minify: { enabled: true }
- 輸入出文件類(lèi)型可用配置選項(xiàng)。
includeInProject - 將生成的文件添加到項(xiàng)目。選填，默認(rèn)值 - false
sourceMaps - 生成合并文件的源文件映射。選填，默認(rèn)值 - false

在項(xiàng)目中使用打包和壓縮

在VS 2015/2017需要安裝BundlerMinifierVsix ，安裝完成后需要重啟VS。

在bundleconfig.json文件右鍵單擊，然后選擇任務(wù)運(yùn)行程序資源管理器。

在Update all fiels選項(xiàng)右鍵單擊，然后選擇Run。

在項(xiàng)目中會(huì)分別生成壓縮后的資源文件。

在視圖中使用打包壓縮后的資源文件

在上一篇博客《ASP.NET Core配置環(huán)境變量和啟動(dòng)設(shè)置》我們已經(jīng)討論過(guò)環(huán)境變量，在視圖中通過(guò) Environment 標(biāo)簽，分別定義開(kāi)發(fā)、預(yù)演和生產(chǎn)環(huán)境加載對(duì)應(yīng)的資源文件。

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

當(dāng)在開(kāi)發(fā)模式下運(yùn)行應(yīng)用程序，我們使用未壓縮Css和腳本文件；在生產(chǎn)環(huán)境中，我們壓縮后的資源文件，這樣可以提高應(yīng)用程序的性能。