前端優化：如何將多張圖示合併成一張，做好資源連結優化？
前端素材資源一般由圖片、SVG、音訊、視訊組成，每個資源都會有一個獨立的連結請求，當一個web頁面素材過多時，這表示該頁面將會建立多次連結請求，這將直接導致頁面載入速度變慢。那麼是否可以將一些常用的圖示素材合併成一張圖片實現共用呢？答案是可以的，這樣在使用時只需建立一次連結請求即可，這個步驟有點複雜， 我們一步步來。
首先，建立一個名稱為prepros的web專案，目錄結構如圖所示：
此專案使用的是sass樣式編譯，編譯工具為Prepros，關於這款工具使用說明可以參考文章《介紹一款極度優秀的前端編譯工具Prepros，讓您的程式設計效率幾何級的提升》。將要合併的6張圖示素材如下：
這裡要注意一點，圖示資料夾icons必須放在一個名稱為images的目錄下，且該images目錄和樣式編譯檔案sass.scss同級，否則編譯時會發生如下錯誤。
錯誤表明，當將images名稱改為img或其它時，將編譯出錯，此處應該是個Prepros的bug，必須要用images資料夾來合併圖片。
開啟sass.scss檔案，寫入程式碼：
$icons表示合併icons目錄下的所有圖示素材。$icons: sprite-map("icons/*.png", $spacing:15px); @mixin iconsbg { background: $icons; } @mixin iconbg($map, $sprite) { background-position: sprite-position($map, $sprite, 0, 0, false); $w: image-width(sprite-file($map, $sprite)); } .icon { @include iconsbg; } .icon_1 { @include iconbg($icons, 1); width: 16px; height: 16px; } .icon_2 { @include iconbg($icons, 2); width: 16px; height: 16px; } .icon_3 { @include iconbg($icons, 3); width: 16px; height: 16px; } .icon_4 { @include iconbg($icons, 4); width: 16px; height: 16px; } .icon_5 { @include iconbg($icons, 5); width: 16px; height: 16px; } .icon_6 { @include iconbg($icons, 6); width: 16px; height: 16px; }
@mixin iconsbg表示引用合併後的圖片作為背景圖。
@mixin iconbg($map, $sprite)表示定位每張圖示素材的位置。
.icon_1表示對圖示1.png的引用。
點選儲存，Prepros將會自動編譯該檔案，並生成了一張由 1.png~6.png 6張圖示合併成的一張新組合素材icons-s72d43477be.png，如圖所示：
開啟該圖片，如圖所示，6張圖片已經合成1張。
開啟index.html檔案，引入編譯生成的sass.css檔案，程式碼如下：
用瀏覽器開啟頁面，發現有個引用錯誤，合併圖路徑出錯了。<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="assets/sass.css" /> </head> <body> <div class="icon icon_1"></div> <div class="icon icon_2"></div> <div class="mycolor">Hello China</div> </body> </html>
不要緊，修改一下sass.scss檔案即可，修改程式碼如下：
.icon {
@include iconsbg;
background: url('./images/icons-s72d43477be.png');
}
（注）實際上只建立了一次連結 http://localhost:7879/assets/images/icons-s72d43477be.png
此外，還有一種途徑可以科學的管理和使用圖示，使用阿里雲提供的線上圖示管理工具 iconfont。
官網地址是http://www.iconfont.cn/，裡面圖示均由SVG實現，不僅可以管理和共享自己的圖示庫，官網上也有大量的圖示庫可供使用，基本能滿足大部分專案對圖示的使用需求。當對圖示沒有太敏感需求的時候，建議前端工程師們使用 iconfont 來處理圖示相關需求。