本文將介紹使用的打包和壓縮的優點，以及如何在ASP.NET Core應用程序中使用這些功能。

概述

在ASP.Net中可以使用打包與壓縮這兩種技術來提高Web應用程序頁面載入的性能。通過減少從伺服器請求的次數和減少資源文件的體積來提高載入性能。

• 打包是一地將多個文件（CSS，JavaScript等資源文件）合并或打包到單個文件。文件合并可減少了 Web 資源文件從伺服器的所需請求數，這樣也可提高頁面載入的性能。
• 壓縮是將各種不同的代碼進行優化，以減少請求資源文件的體積。壓縮的常見方法刪除不必要的空格和注釋，並將變數名縮減為一個字元。

例如下面JavaScript函數：

AddAltToImg = function (imageTagAndImageID, imageContext) {
///
///


//The image selector. //The image context. ///
var imageElement = $(imageTagAndImageID, imageContext);
imageElement.attr("alt", imageElement.attr("id").replace(/ID/, ""));
}

壓縮後，函數簡化為如下：

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

除了刪除注釋和不必要的空格之外，參數和變數名稱被重命名（縮寫）如下：

bundleconfig.json文件

MVC項目模板提供了一個bundleconfig.json配置文件，它定義了打包的配置選項。默認情況下，實現了自定義腳本文件(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
}
]

配置選項詳細說明：

• outputFileName - 要輸出打包包文件的路徑。 與bundleconfig.json文件的相對路徑。

  必填

• inputFiles - 要打包的的文件路徑數組。 與是配置文件的相對路徑。

  選填

  ，如果是空數組會輸出一個空文件。 支持通配符模式。
• minify - 輸入出類型的壓縮選項。

  選填

  ，默認值 -minify: { enabled: true }
• 輸入出文件類型可用配置選項。
  • CSS Minifier
  • JavaScript Minifier
  • HTML Minifier
• includeInProject - 將生成的文件添加到項目。

  選填

  ，默認值 - false

• sourceMaps - 生成合并文件的源文件映射。

  選填

  ，默認值 - false

在項目中使用打包和壓縮

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

在bundleconfig.json文件右鍵單擊，然後選擇任務運行程序資源管理器。

在Update all fiels選項右鍵單擊，然後選擇Run。

在項目中會分別生成壓縮後的資源文件。

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

在上一篇博客《ASP.NET Core配置環境變數和啟動設置》我們已經討論過環境變數，在視圖中通過 Environment 標籤，分別定義開發、預演和生產環境載入對應的資源文件。

當在開發模式下運行應用程序，我們使用未壓縮Css和腳本文件；在生產環境中，我們壓縮後的資源文件，這樣可以提高應用程序的性能。

總結

在ASP.Net中可以使用打包與壓縮這兩種技術來提高Web應用程序頁面載入的性能。希望上面的內容對大家的學習有所幫助，謝謝！

感謝無語1994提供的另一個解決方案，通過安裝BundlerMinifier Nuget包，也可以達到合并與壓縮的目的。原文地址：《10,關於在vs2017中的netcore項目使用BundlerMinifier 配置問題》。

參考:

• https://github.com/aspnet/Docs/blob/master/aspnetcore/client-side/bundling-and-minification.md
• https://www.codeproject.com/Articles/1158377/NET-Core-Startup

第一次使用Markdown寫博客，還不是很習慣，排版不夠整齊，請大家見諒，謝謝！

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！