本文將介紹使用的打包和壓縮的優(yōu)點(diǎn),以及如何在ASP.NET Core應(yīng)用程序中使用這些功能。
概述
在ASP.Net中可以使用打包與壓縮這兩種技術(shù)來(lái)提高Web應(yīng)用程序頁(yè)面加載的性能。通過減少?gòu)姆?wù)器請(qǐng)求的次數(shù)和減少資源文件的體積來(lái)提高加載性能。
打包是一地將多個(gè)文件(CSS,JavaScript等資源文件)合并或打包到單個(gè)文件。文件合并可減少了 Web 資源文件從服務(wù)器的所需請(qǐng)求數(shù),這樣也可提高頁(yè)面載入的性能。
壓縮是將各種不同的代碼進(jìn)行優(yōu)化,以減少請(qǐng)求資源文件的體積。壓縮的常見方法刪除不必要的空格和注釋,并將變量名縮減為一個(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ù)和變量名稱被重命名(縮寫)如下:
原始名稱 | 重命名后 |
---|---|
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 - 輸入出類型的壓縮選項(xiàng)。 選填,默認(rèn)值 -
minify: { enabled: true }
輸入出文件類型可用配置選項(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)討論過環(huán)境變量,在視圖中通過 Environment 標(biāo)簽,分別定義開發(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)在開發(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è)解決方案,通過安裝BundlerMinifier Nuget包,也可以達(dá)到合并與壓縮的目的。原文地址:《10,關(guān)于在vs2017中的netcore項(xiàng)目使用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寫博客,還不是很習(xí)慣,排版不夠整齊,請(qǐng)大家見諒,謝謝!
轉(zhuǎn)載請(qǐng)注明出處,原文鏈接:http://www.cnblogs.com/tdfblog/p/bundling-and-minification-in-asp-net-core.html
如果您覺得閱讀本文對(duì)您有幫助,請(qǐng)點(diǎn)一下“推薦”按鈕,您的“推薦”將是我最大的寫作動(dòng)力!
歡迎各位轉(zhuǎn)載,轉(zhuǎn)載文章之后必須在文章頁(yè)面明顯位置給出作者和原文連接。
分類: ASP.NET Core
http://www.cnblogs.com/tdfblog/p/bundling-and-minification-in-asp-net-core.html