對於前端效能最佳化方法有很多，包括：圖片合並、使用緩存、使用CDN、減少重新導向、減少請求、壓縮等等。今天就針對減少請求、資源壓縮，給大家推薦一個基於.Net開發的資源合並與壓縮的開源計畫。
在介紹這個計畫之前，先問大家一個問題，大家知道一個 瀏覽器同網域名稱請求的最大並行數限制是多少嗎？
在早期的瀏覽器有的是2個、有的是4個，現在市面主流的瀏覽器一般限制數量是6個，手機一般是4個。雖然 每個瀏覽器限制數量不一樣，但我們知道的是，當一個頁面同時發起過多的請求，肯定會導致部份請求在等待的 。
所以，我們壓縮和合並靜態資源請求數量，對於我們最佳化效能肯定有好處的。
01
計畫簡介
這是一個基於.Net Core開發的，實作壓縮Css、Javascript、Html資源的壓縮、合並功能的元件。透過這個元件我們就可以實作靜態資源的捆綁， 實作對js、css、less、scss等靜態資源的自動打包捆綁處理。
透過將多個檔合並成了一個檔，減少瀏覽器的請求從而實作提升網站的存取效能的需求。
02
計畫特點
1、Js壓縮：進行去掉空格，換行，註釋等，格式緊湊，內部方法匿名化，節約儲存空間。
2、Css壓縮：去掉空格，換行，註釋等，格式緊湊，節約儲存空間。
3、Html壓縮：壓縮效果可以實作5-10%的壓縮，刪除助手、折疊空白、刪除可選標記（p、li…）、刪除參照的內容、刪除特定內容、解碼HTML實體、壓縮行內樣式和指令碼；支持Html5。
03
計畫結構
1、平台：基於.Net Core 4.5、Netstandard2.0開發
2、開發工具： Visual Studio 2017
計畫結構
04
使用方法
Js檔壓縮
var result = Uglify.Js("var x = 5; var y = 6;");Console.WriteLine(result.Code); // prints: var x=5,y=6
Css檔壓縮
var result = Uglify.Css("div { color: #FFF; }");Console.WriteLine(result.Code); // prints: div{color:#fff}
Html檔壓縮
var result = Uglify.Html("<div><p>This is <em> a text </em></p></div>");Console.WriteLine(result.Code); //prints: <div><p>This is <em>a text</em></div>
文本解析Html
var result = Uglify.HtmlToText("<div><p>This is <em> a text </em></p></div>");Console.WriteLine(result.Code); // prints: This is a text
Js、Css檔合並請求範例
app.UseBundling(bundles =>{ bundles.LoadFromConfigFile("/bundleconfig.json", _env.ContentRootFileProvider); // 如果你需要對Bundle Minifier的配置也進行處理 bundles.AddCss("/main.css") // 告訴中介軟體需要將以下的檔最終打包成一個虛擬檔名 .Include("/Content/bootstrap.min.css") .Include("/fonts/icomoon.min.css") .Include("/Content/jquery.paging.css") .Include("/Content/common/reset.css") .Include("/Content/common/loading.css") .Include("/Content/common/ style.css") .Include("/Content/common/article style.css") .Include("/Content/common/leaderboard.css") .Include("/Content/microtip.min.css") .Include("/Assets/breadcrumb/ style.css") .Include("/Assets/nav/css/ style.css") .Include("/Assets/tippy/tippy.css"); bundles.AddJs("/main.js") // 告訴中介軟體需要將以下的檔最終打包成一個虛擬檔名 .Include("/Scripts/bootstrap.min.js") .Include("/Scripts/bootstrap-suggest.min.js") .Include("/Scripts/jquery.query.js") .Include("/Scripts/jquery.paging.js") .Include("/Scripts/ripplet.js") .Include("/Scripts/global/scripts.js") .Include("/Assets/tippy/tippy.js") .Include("/Assets/newsbox/jquery.bootstrap.newsbox.js") .Include("/Assets/tagcloud/js/tagcloud.js") .Include("/Assets/scrolltop/js/scrolltop.js") .Include("/Assets/nav/js/main.js");});
最後，對於提升網站效能雖然非常重要，但合並檔如果太大，也是會影響效能的。 另外采用合並中介軟體，對於開發的時候需要編寫額外的程式碼、相對於原生的寫法比較不直觀，所以在最佳化效能的同時，我們也要 找到一個平衡點，而不是一味的追求效能最佳化。
05
計畫地址
https://github.com/trullock/NUglify
最後推薦加入我的 ， 裏麵包含7個教程，其中有：【 三層架構教程 】與【 領域驅動設計架構教程 】，還有現在正在編寫的【動態Web API】教程。
- End -
分享一套.NetCore從入門到精通視訊教程
點選下方公眾號卡片，關註我
回復「 888 」，免費領取
覺得好看 點個在看👇
