国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

使用purifycss精簡(jiǎn)css

ethernet / 2474人閱讀

摘要：解決在精簡(jiǎn)的時(shí)候，需要把里面的相對(duì)路徑替換成絕對(duì)路徑將中的引用的相對(duì)路徑轉(zhuǎn)化為絕對(duì)路徑精簡(jiǎn)后，破壞了通用模塊的緩存這其實(shí)是一個(gè)取舍問題。解決不精簡(jiǎn)通用模塊，只精簡(jiǎn)具體業(yè)務(wù)相關(guān)的。

隨著項(xiàng)目的不斷迭代，我們的css會(huì)不斷變大，但通常頁(yè)面上需要用到的樣式并沒有那么多，很多樣式是無(wú)用的，而如果靠人工去剔除，吃力又容易出錯(cuò)。

有痛點(diǎn)就應(yīng)該去想辦法解決。那么有沒有辦法通過自動(dòng)化來把這些無(wú)用的樣式剔除呢？答案是肯定的，不然就沒有這篇文章了。目前我能找到的有以下兩種方案：

方案一：遍歷樣式表，通過dom選擇器判斷每個(gè)樣式是否在頁(yè)面中存在

這種方案很精準(zhǔn)，通過篩選有用的選擇器來去掉那些沒有用到的選擇器。換句話來，只保留被用到的樣式，去掉沒用到的樣式。

但這個(gè)方案明顯存在缺陷，如果在js里面對(duì)dom的操作（例如對(duì)dom添加一個(gè)class樣式等操作），這些如何判斷？很顯然，如果是js中引用到了css樣式的話，這種方案是解決不了的。

方案二：找到那些一定不會(huì)被用到的選擇器，去掉這些即可

那么怎么確定一個(gè)選擇器一定不會(huì)被用到？從選擇器的類型來看，至少包括下面幾種：

標(biāo)簽選擇器

class選擇器

ID選擇器

相鄰選擇器

父子選擇器

屬性選擇器

...

具體有哪些，可以參考下面的鏈接

這么多類型的選擇器，如果簡(jiǎn)單以字符解析js，想在js中確定用到了某個(gè)選擇器，無(wú)疑是比較困難的事情。但我們換個(gè)角度來思考，不管選擇器類型多復(fù)雜，它們都是由單詞組成的，比如：

h1 => ["h"]

.a .d => ["a", "c"]

.ab-c => ["ab", "c"]

#text => ["text"]

.ab-c #text => ["ab", "c", "text"]

因此一個(gè)合法的選擇器，我們可以看作是一組單詞的集合。

接著，再想想我們?cè)趆tml或者js里面是如果引用這些選擇器的？無(wú)非就是：










$("text").addClass(".a");

那么對(duì)于一個(gè)選擇器來說，在html或者js被引用的話，那么html或者js代碼里面一定會(huì)出現(xiàn)這個(gè)選擇器的所有單詞。如果沒有出現(xiàn)或者沒有全部出現(xiàn)的話，證明這個(gè)選擇器是沒有被用到的。

比如上面例子中：

選擇器h1的單詞集合["h"]在html或者js中并沒出現(xiàn)，因此選擇器h1是無(wú)用的。

選擇器.a .d的單詞集合["a", "d"]在js中只出現(xiàn)了單詞a，而沒有出現(xiàn)單詞d，因此選擇器.a .d也是無(wú)用的。

因此，怎么確定一個(gè)選擇器一定不會(huì)被用到這個(gè)問題，就轉(zhuǎn)化成，如何確定一個(gè)選擇器的單詞集合是否是html或者js代碼中的單詞集合的子集這個(gè)問題。

那么判斷一個(gè)選擇器的單詞集合是否是html或者js代碼中的單詞集合的子集，如果是就保留，如果不是就丟棄掉好了。

這種方案通過剔除一定不會(huì)用到的選擇器，換句話來說，它只能知道某個(gè)選擇器可能被用到，無(wú)法確定某個(gè)選擇器是一定會(huì)用的到。

如果有仔細(xì)注意上面的例子，就會(huì)發(fā)現(xiàn)如果我們的html結(jié)構(gòu)是這樣的，選擇器.ab-c依舊會(huì)被保留下來

也就是說這種方案也是還是有缺陷的，不能精準(zhǔn)地確定某個(gè)選擇器一定會(huì)用到，會(huì)存在漏剔除的情況（但絕不會(huì)出現(xiàn)誤剔除的情況）。

在實(shí)際應(yīng)用中，我們發(fā)現(xiàn)這種方案還是能剔除很多不必要的樣式（所以目前測(cè)試的案例不多）:

因此，從原理和效果上來看，第二種方案來實(shí)現(xiàn)剔除css是極不錯(cuò)的，在實(shí)際運(yùn)用中，采用開源的purifycss (畢竟有現(xiàn)成的，就沒必要自己造輪子了)。

使用purifycss的一些細(xì)節(jié)和注意

精簡(jiǎn)外部css的時(shí)候，需要注意內(nèi)部是否以相對(duì)路徑引用其他的資源（圖片，字體等）

舉個(gè)例子，我的html結(jié)構(gòu)和css引用是這樣的：

而style-notification.fb62b095.css這個(gè)css是屬于外部的一個(gè)css，它的代碼里用到一張背景：

.bg {

background-image: url("../../images/bg.jpg"); 

}

那這時(shí)候我精簡(jiǎn)css的話，把這個(gè)css轉(zhuǎn)化成我們自己的cdn(//wximg.gtimg.com/wxgame/webpack/ddz/mincss/style-notification_fb62b095.css), 那么里面的代碼自然也是：

.bg {

background-image: "../../images/bg.jpg";

}

而此時(shí)再訪問我們的頁(yè)面的時(shí)候，就會(huì)發(fā)現(xiàn)背景加載不出來了，控制臺(tái)顯示圖片404了。原因很簡(jiǎn)單：

../../images/bg.jpg這個(gè)相對(duì)路徑對(duì)于//res.wx.qq.com/wechatgame/static/game/dist/css/style-notification.fb62b095.css來說，它的真實(shí)路徑是//res.wx.qq.com/wechatgame/static/game/dist/images/bg.jpg, 而對(duì)于//wximg.gtimg.com/wxgame/webpack/ddz/mincss/style-notification_fb62b095.css來說，它的真實(shí)路徑是//wximg.gtimg.com/wxgame/webpack/ddz/mincss/images/bg.jpg。而我們?cè)谏蟼鱟dn，并沒有上傳//wximg.gtimg.com/wxgame/webpack/ddz/mincss/images/bg.jpg，所以就出現(xiàn)圖片加載不出來的情況。

解決：在精簡(jiǎn)css的時(shí)候，需要把css里面的相對(duì)路徑替換成絕對(duì)路徑

// 將css中的引用的相對(duì)路徑轉(zhuǎn)化為絕對(duì)路徑

function relative2absolute(cssContent, base) {

return cssContent.replace(/url([""]?([^)]+)[""]?)/g, function(input, _url) {

if( isRemotePath(_url)) {

return input;

}

return "url(" + url.resolve(base, _url) + ")";

});

}

精簡(jiǎn)css后，破壞了通用模塊css的緩存

這其實(shí)是一個(gè)取舍問題。把很多通用css放在一個(gè)通用模塊里面，頁(yè)面加載的時(shí)候，可以利用瀏覽器緩存加快速度。而如果精簡(jiǎn)css的話，意味著每個(gè)頁(yè)面所用到的通用模塊都不一樣，自然就用不了緩存。

解決：不精簡(jiǎn)通用模塊css，只精簡(jiǎn)具體業(yè)務(wù)相關(guān)的css。我的實(shí)現(xiàn)是給link加個(gè)標(biāo)志min-css="true":

這樣子，只構(gòu)建精簡(jiǎn)帶有標(biāo)志位的css，通用模塊的css仍可以利用緩存，而具體業(yè)務(wù)相關(guān)的css可以盡可能剔除無(wú)用的樣式，減少體積。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/81857.html

相關(guān)文章

  • 使用purifycss精簡(jiǎn)css

    摘要：解決在精簡(jiǎn)的時(shí)候，需要把里面的相對(duì)路徑替換成絕對(duì)路徑將中的引用的相對(duì)路徑轉(zhuǎn)化為絕對(duì)路徑精簡(jiǎn)后，破壞了通用模塊的緩存這其實(shí)是一個(gè)取舍問題。解決不精簡(jiǎn)通用模塊，只精簡(jiǎn)具體業(yè)務(wù)相關(guān)的。 隨著項(xiàng)目的不斷迭代，我們的css會(huì)不斷變大，但通常頁(yè)面上需要用到的樣式并沒有那么多，很多樣式是無(wú)用的，而如果靠人工去剔除，吃力又容易出錯(cuò)。 有痛點(diǎn)就應(yīng)該去想辦法解決。那么有沒有辦法通過自動(dòng)化來把這些無(wú)用的樣式...

    104828720 評(píng)論0 收藏0

  • webpack4 系列教程(九): CSS Tree Shaking

    摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請(qǐng)查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過慢的朋友請(qǐng)移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...

    趙連江 評(píng)論0 收藏0

  • webpack4 系列教程(九): CSS Tree Shaking

    摘要：按照我們的仿真的環(huán)境，最終之后的效果應(yīng)該是打包后的文件不含有樣式類。如果忘記了它的用法，請(qǐng)查看系列教程六處理系列教程五處理所以，我們的文件如下安裝完相關(guān)插件后，我們需要在的配置中引用第三部分定義的代碼。 教程所示圖片使用的是 github 倉(cāng)庫(kù)圖片，網(wǎng)速過慢的朋友請(qǐng)移步 原文地址 有空就來看看個(gè)人技術(shù)小站, 我一直都在 0. 課程介紹和資料 本次課程的代碼目錄(如下圖所示)：s...

    superw 評(píng)論0 收藏0

  • webpack入門學(xué)習(xí)手記（五）

    摘要：另外需要指定這個(gè)參數(shù)，表示在配置的數(shù)值以下的圖片才進(jìn)行編碼，超過的不進(jìn)行處理。代碼如下所以過程就是引入了，然后進(jìn)行打包處理，生成和。目前這個(gè)入門學(xué)習(xí)手記到這里就結(jié)束了。完相關(guān)文章入門學(xué)習(xí)手記一入門學(xué)習(xí)手記二入門學(xué)習(xí)手記三入門學(xué)習(xí)手記四 showImg(https://segmentfault.com/img/remote/1460000019860769?w=1150&h=599); ...

    AlphaWatch 評(píng)論0 收藏0

  • 24 個(gè)實(shí)例入門并掌握「Webpack4」(二)

    摘要：代碼如下所示按照正常使用習(xí)慣，操作來實(shí)現(xiàn)樣式的添加和卸載，是一貫技術(shù)手段。將幫助我們進(jìn)行操作。 繼 24 個(gè)實(shí)例入門并掌握「Webpack4」(一) 后續(xù)： JS Tree Shaking CSS Tree Shaking 圖片處理匯總 字體文件處理 處理第三方 js 庫(kù) 開發(fā)模式與 webpack-dev-server 開發(fā)模式和生產(chǎn)模式?實(shí)戰(zhàn) 打包自定義函數(shù)庫(kù) 九、JS Tre...

    hlcc 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<