最近在做公司現(xiàn)有項目的優(yōu)化工作，其中一項就是將部分靜態(tài)資源圖從原格式轉為webp格式。從而在支持webp的瀏覽器中輸出webp格式的圖片。由于項目技術棧是Vue + webpack + less。原先所有的靜態(tài)資源圖基本都走webpack來進行版本管理。如此的話，想通過webpack加上js業(yè)務邏輯代碼，實現(xiàn)webp格式的圖片瀏覽器全兼容，并沒有走通。無奈，只有將所有靜態(tài)資源圖放置在根目錄下static目錄下，此目錄中所有的圖片不走webpack處理。因此配合自己的業(yè)務代碼，可以實現(xiàn)webp全瀏覽器兼容。但如此操作，因不走webpack，所有這些圖片的版本管理也失去了。另一個問題是css中的背景圖處理。我用less寫了一個方法。參數(shù)為圖片路徑，從而實現(xiàn)以上的兼容效果。但我看了network面板，發(fā)現(xiàn)，雖然在支持webp的瀏覽器中輸出的是webp格式圖片，但原格式圖片也依然被載入并占用一個請求。如此的話，似乎css兼容就做的毫無意義了。不知有沒有更好的實踐？以下為less代碼：.webpbg(@url) {  background-image: url(@url);  .webpa & {    background-image: url('@{url}.webp');  }}