資訊專欄INFORMATION COLUMN
摘要：解決在精簡的時候，需要把里面的相對路徑替換成絕對路徑將中的引用的相對路徑轉化為絕對路徑精簡后，破壞了通用模塊的緩存這其實是一個取舍問題。解決不精簡通用模塊，只精簡具體業務相關的。
隨著項目的不斷迭代，我們的css會不斷變大，但通常頁面上需要用到的樣式并沒有那么多，很多樣式是無用的，而如果靠人工去剔除，吃力又容易出錯。
有痛點就應該去想辦法解決。那么有沒有辦法通過自動化來把這些無用的樣式剔除呢？答案是肯定的，不然就沒有這篇文章了。目前我能找到的有以下兩種方案：
方案一：遍歷樣式表，通過dom選擇器判斷每個樣式是否在頁面中存在這種方案很精準，通過篩選有用的選擇器來去掉那些沒有用到的選擇器。換句話來，只保留被用到的樣式，去掉沒用到的樣式。
但這個方案明顯存在缺陷，如果在js里面對dom的操作（例如對dom添加一個class樣式等操作），這些如何判斷？很顯然，如果是js中引用到了css樣式的話，這種方案是解決不了的。
方案二：找到那些一定不會被用到的選擇器，去掉這些即可那么怎么確定一個選擇器一定不會被用到？從選擇器的類型來看，至少包括下面幾種：
標簽選擇器
class選擇器
ID選擇器
相鄰選擇器
父子選擇器
屬性選擇器
...
具體有哪些，可以參考下面的鏈接
這么多類型的選擇器，如果簡單以字符解析js，想在js中確定用到了某個選擇器，無疑是比較困難的事情。但我們換個角度來思考，不管選擇器類型多復雜，它們都是由單詞組成的，比如：
h1 => ["h"] .a .d => ["a", "c"] .ab-c => ["ab", "c"] #text => ["text"] .ab-c #text => ["ab", "c", "text"]
因此一個合法的選擇器，我們可以看作是一組單詞的集合。
接著，再想想我們在html或者js里面是如果引用這些選擇器的？無非就是：
$("text").addClass(".a");
那么對于一個選擇器來說，在html或者js被引用的話，那么html或者js代碼里面一定會出現這個選擇器的所有單詞。如果沒有出現或者沒有全部出現的話，證明這個選擇器是沒有被用到的。
比如上面例子中：
選擇器h1的單詞集合["h"]在html或者js中并沒出現，因此選擇器h1是無用的。
選擇器.a .d的單詞集合["a", "d"]在js中只出現了單詞a，而沒有出現單詞d，因此選擇器.a .d也是無用的。
因此，怎么確定一個選擇器一定不會被用到這個問題，就轉化成，如何確定一個選擇器的單詞集合是否是html或者js代碼中的單詞集合的子集這個問題。
那么判斷一個選擇器的單詞集合是否是html或者js代碼中的單詞集合的子集，如果是就保留，如果不是就丟棄掉好了。
這種方案通過剔除一定不會用到的選擇器，換句話來說，它只能知道某個選擇器可能被用到，無法確定某個選擇器是一定會用的到。
如果有仔細注意上面的例子，就會發現如果我們的html結構是這樣的，選擇器.ab-c依舊會被保留下來
也就是說這種方案也是還是有缺陷的，不能精準地確定某個選擇器一定會用到，會存在漏剔除的情況（但絕不會出現誤剔除的情況）。
在實際應用中，我們發現這種方案還是能剔除很多不必要的樣式（所以目前測試的案例不多）:
因此，從原理和效果上來看，第二種方案來實現剔除css是極不錯的，在實際運用中，采用開源的purifycss (畢竟有現成的，就沒必要自己造輪子了)。
使用purifycss的一些細節和注意精簡外部css的時候，需要注意內部是否以相對路徑引用其他的資源（圖片，字體等）
舉個例子，我的html結構和css引用是這樣的：
而style-notification.fb62b095.css這個css是屬于外部的一個css，它的代碼里用到一張背景：
.bg {
background-image: url("../../images/bg.jpg");
}
那這時候我精簡css的話，把這個css轉化成我們自己的cdn(//wximg.gtimg.com/wxgame/webpack/ddz/mincss/style-notification_fb62b095.css), 那么里面的代碼自然也是：
.bg {
background-image: "../../images/bg.jpg";
}
而此時再訪問我們的頁面的時候，就會發現背景加載不出來了，控制臺顯示圖片404了。原因很簡單：
../../images/bg.jpg這個相對路徑對于//res.wx.qq.com/wechatgame/static/game/dist/css/style-notification.fb62b095.css來說，它的真實路徑是//res.wx.qq.com/wechatgame/static/game/dist/images/bg.jpg, 而對于//wximg.gtimg.com/wxgame/webpack/ddz/mincss/style-notification_fb62b095.css來說，它的真實路徑是//wximg.gtimg.com/wxgame/webpack/ddz/mincss/images/bg.jpg。而我們在上傳cdn，并沒有上傳//wximg.gtimg.com/wxgame/webpack/ddz/mincss/images/bg.jpg，所以就出現圖片加載不出來的情況。
解決：在精簡css的時候，需要把css里面的相對路徑替換成絕對路徑
// 將css中的引用的相對路徑轉化為絕對路徑
function relative2absolute(cssContent, base) {
return cssContent.replace(/url([""]?([^)]+)[""]?)/g, function(input, _url) {
if( isRemotePath(_url)) {
return input;
}
return "url(" + url.resolve(base, _url) + ")";
});
}
精簡css后，破壞了通用模塊css的緩存
這其實是一個取舍問題。把很多通用css放在一個通用模塊里面，頁面加載的時候，可以利用瀏覽器緩存加快速度。而如果精簡css的話，意味著每個頁面所用到的通用模塊都不一樣，自然就用不了緩存。
解決：不精簡通用模塊css，只精簡具體業務相關的css。我的實現是給link加個標志min-css="true":
這樣子，只構建精簡帶有標志位的css，通用模塊的css仍可以利用緩存，而具體業務相關的css可以盡可能剔除無用的樣式，減少體積。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116550.html
摘要：解決在精簡的時候，需要把里面的相對路徑替換成絕對路徑將中的引用的相對路徑轉化為絕對路徑精簡后，破壞了通用模塊的緩存這其實是一個取舍問題。解決不精簡通用模塊，只精簡具體業務相關的。 隨著項目的不斷迭代，我們的css會不斷變大，但通常頁面上需要用到的樣式并沒有那么多，很多樣式是無用的，而如果靠人工去剔除，吃力又容易出錯。 有痛點就應該去想辦法解決。那么有沒有辦法通過自動化來把這些無用的樣式...
摘要：按照我們的仿真的環境，最終之后的效果應該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步 原文地址 有空就來看看個人技術小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
摘要：按照我們的仿真的環境，最終之后的效果應該是打包后的文件不含有樣式類。如果忘記了它的用法，請查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉庫圖片，網速過慢的朋友請移步 原文地址 有空就來看看個人技術小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...
摘要：另外需要指定這個參數，表示在配置的數值以下的圖片才進行編碼，超過的不進行處理。代碼如下所以過程就是引入了，然后進行打包處理，生成和。目前這個入門學習手記到這里就結束了。完相關文章入門學習手記一入門學習手記二入門學習手記三入門學習手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...
摘要：代碼如下所示按照正常使用習慣，操作來實現樣式的添加和卸載，是一貫技術手段。將幫助我們進行操作。 繼 24 個實例入門并掌握「Webpack4」(一) 后續： JS Tree Shaking CSS Tree Shaking 圖片處理匯總 字體文件處理 處理第三方 js 庫 開發模式與 webpack-dev-server 開發模式和生產模式?實戰 打包自定義函數庫 九、JS Tre...
閱讀 1786·2021-10-12 10:12
閱讀 2542·2021-09-29 09:42
閱讀 2718·2021-09-03 10:28
閱讀 2255·2019-08-30 15:54
閱讀 1162·2019-08-30 15:53
閱讀 1394·2019-08-30 11:26
閱讀 3362·2019-08-30 11:02
閱讀 2142·2019-08-30 11:02
