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和腳本文件；在生產環境中，咱們壓縮後的資源文件，這樣能夠提升應用程序的性能。