ASP.NET Core Web 资源打包与压缩
本文將介紹使用的打包和壓縮的優(yōu)點(diǎn)，以及如何在ASP.NET Core應(yīng)用程序中使用這些功能。
概述
在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)方法刪除不必要的空格和注釋，并將變量名縮減為一個(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ě)）如下：
| 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)。
CSS Minifier
JavaScript Minifier
HTML Minifier
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" /><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>當(dāng)在開(kāi)發(fā)模式下運(yùn)行應(yīng)用程序，我們使用未壓縮Css和腳本文件；在生產(chǎn)環(huán)境中，我們壓縮后的資源文件，這樣可以提高應(yīng)用程序的性能。
總結(jié)
在ASP.Net中可以使用打包與壓縮這兩種技術(shù)來(lái)提高Web應(yīng)用程序頁(yè)面加載的性能。希望上面的內(nèi)容對(duì)大家的學(xué)習(xí)有所幫助，謝謝！
感謝無(wú)語(yǔ)1994提供的另一個(gè)解決方案，通過(guò)安裝BundlerMinifier Nuget包，也可以達(dá)到合并與壓縮的目的。原文地址：《10,關(guān)于在vs2017中的netcore項(xiàng)目使用BundlerMinifier 配置問(wèn)題》。
參考:
https://github.com/aspnet/Docs/blob/master/aspnetcore/client-side/bundling-and-minification.md
https://www.codeproject.com/Articles/1158377/NET-Core-Startup
第一次使用Markdown寫(xiě)博客，還不是很習(xí)慣，排版不夠整齊，請(qǐng)大家見(jiàn)諒，謝謝
原文地址：http://www.cnblogs.com/tdfblog/p/bundling-and-minification-in-asp-net-core.html
.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺(tái)或掃描二維碼關(guān)注
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的ASP.NET Core Web 资源打包与压缩的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： WebAssembly：随风潜入夜
- 下一篇： ASP.NET Core Web API