如何優(yōu)化小程序中的css treeshaking

這篇文章主要介紹了如何優(yōu)化小程序中的css treeshaking，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

前言

em...我寫這工具的原因就是為了上班多劃水，少費(fèi)腦，少犯錯(cuò)，一勞永逸！
每次局部改版老頁面時(shí)，我不會(huì)去刪除老的css。因?yàn)楹苈闊矣趾ε虏恍⌒膭h出了不可預(yù)估的樣式錯(cuò)亂。
所以我基本上都是在css文件的最后一行去添加新的樣式，然后......，css文件越來越大。所以為了解決這種手動(dòng)刪除css的問題，開發(fā)了一個(gè)小工具。


我們最終實(shí)現(xiàn)效果是通過終端命令去完成css treeshaking

// 到項(xiàng)目目錄下cd Documents/xxx/xcx// 微信qts-lint css wx// 支付寶qts-lint css alipay復(fù)制代碼

處理命令行

如何全局接收qts-lint命令

配置package.json文件的bin字段，全局安裝后就可以識(shí)別qts-lint xxxx命令啦，是不是很簡(jiǎn)單

{  "name": "xxx",  "version": "1.0.0",  "description": "小程序代碼",  "bin": {    "qts-lint": "./bin.js"
  }
}復(fù)制代碼

如何接收命令行參數(shù)

使用commander接收命令，區(qū)分執(zhí)行的是微信還是支付寶，再去執(zhí)行對(duì)應(yīng)的邏輯
關(guān)于commander我就不具體介紹了，大家可以自己看看文檔

const program = require("commander");
program
  .command("css <app-type>") // 參數(shù)
  .description("格式化，css tree-shaking") // 描述
  .action((type, command) => {    // do something...
  });復(fù)制代碼

獲取css依賴關(guān)系

前面我們說了怎么去接收命令行命令，接下來我們就進(jìn)入正題，如何對(duì)小程序css進(jìn)行tree shaking。
目前我們使用插件purify-css來做tree shaking，所以就需要獲取css的依賴關(guān)系來確定哪些css是頁面沒用到的。

獲取小程序所有頁面

小程序所有頁面都在app.json中維護(hù)，app.json的格式都是如下所示

{  "pages": [    "pages/index/index",    "pages/login/login",
    ...
  ],  "subPackages": [
    {        "root": "mine",      "pages": [            "/index/index",
            ...
        ]
    }
    ],
    ...
}復(fù)制代碼

所以為了獲取主包和分包中的所有頁面，就需要去循環(huán)pages和subPackages，特別需要注意的是subPackages的路由是由root+pages組合而成的，下方就是我們獲取小程序中所有頁面路由的方法

function readPages(json = {}, root) {    let pages = (json.pages || []).map(p => path.join(root, p));
    json.subPackages &&
        json.subPackages.forEach(element => {
            pages = pages.concat(element.pages.map(p => path.join(root, element.root, p)));
        });    return pages;
}復(fù)制代碼

獲取css的依賴關(guān)系

循環(huán)獲取到的頁面，獲取每個(gè)頁面對(duì)應(yīng)的css，js，wxml，json。
保存得到的數(shù)據(jù)

{    "css url": ["js url", "wxml url", ...]
}復(fù)制代碼

但是頁面還存在組件和引用，所以我們還需要

1. 獲取組件css，js，wxml，如果是組件則加入父頁面數(shù)組的同時(shí)保存自身的鍵值對(duì)

2. 解析wxml文件，獲取引用，將引用路徑添加到數(shù)組里

3. 解析引用的文件，判斷是否還存在引用文件，存在回到步驟1

4. 解析json文件，存在組件回到步驟1

上面我們說到要解析wxml，那么我們?cè)撊绾稳ソ馕鰓xml呢？

可以使用htmlparser2解析后循環(huán)節(jié)點(diǎn)，獲取type是tag而且name等于import或include的標(biāo)簽，然后再拿到該標(biāo)簽的src，就可以獲取到該頁面的引用或引用里的引用了

這時(shí)就會(huì)得到一個(gè)像下面這樣的css依賴關(guān)系結(jié)構(gòu)（包括頁面，組件，引用）

{  // 頁面css
    "/pages/index/index.css": [    // 頁面
    "/pages/index/index.js",    "/pages/index/index.wxml",    // 組件
    "/pages/components/title/index.js",    "/pages/components/title/index.wxml",    // 引用模版
    "/pages/template/index.wxml"
  ],  // 組件css
  "/pages/xxx/xxx.css":[    // 父頁面
    "/pages/index/index.js",    "/pages/index/index.wxml",    // 組件的頁面
    "/pages/index/index.js",    "/pages/index/index.wxml",
    ...
  ],
  ...
}復(fù)制代碼

這里大家可能會(huì)有2個(gè)疑惑

為啥目前頁面的css還要關(guān)聯(lián)組件的wxml和js？

因?yàn)橹Ц秾毚嬖跇邮酱┩?，而我們?xiàng)目是多人開發(fā)的，所以怕存在組件的樣式在頁面寫了，組件就沒寫的情況，所以做了這種兼容

為啥目前組件的css也要關(guān)聯(lián)頁面的wxml和js？

可能存在頁面?zhèn)鹘M件className，而樣式枚舉寫在組件內(nèi)的情況，那么只能關(guān)聯(lián)頁面才能拿到傳入的className。這里可能存在樣式多刪的情況，比如樣式里寫里四種樣式，但是實(shí)際用到的只有一種，那可能就會(huì)把其它3種刪掉，這就不是我們想要的效果，目前的解決辦法只有在js里加上枚舉的className注釋，purify-css檢查到j(luò)s里出現(xiàn)了需要的幾個(gè)className的枚舉后就不刪除css里的樣式了

刪除css

上面我們獲取到css依賴關(guān)系后，直接利用purify-css完成刪除css的操作啦

purify('css url', [...], options)復(fù)制代碼

弱小的我源碼和其它插件放在一起，大家有興趣可以看看喲
源碼鏈接：www.npmjs.com/package/xcx…
npm 全局

$ npm i -g xcx-lint-qts復(fù)制代碼

yarn 全局

$ yarn global add xcx-lint-qts復(fù)制代碼

// 到項(xiàng)目目錄下cd Documents/xxx/xcx// 微信qts-lint css wx// 支付寶qts-lint css alipay復(fù)制代碼

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何優(yōu)化小程序中的css treeshaking”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!