作者簡(jiǎn)介

(資料圖)

Can，攜程前端開(kāi)發(fā)，目前從事小程序開(kāi)發(fā)工作，對(duì)編譯打包技術(shù)、小程序跨平臺(tái)解決方案有濃厚興趣。

目前我們團(tuán)隊(duì)小程序是使用 Taro 跨端方案 React 框架進(jìn)行開(kāi)發(fā)，基于現(xiàn)有樣式方案，在編譯打包后會(huì)產(chǎn)生大量的樣式代碼冗余，在項(xiàng)目編譯后的產(chǎn)物中占有較大比例。

分析了編譯后的樣式代碼后，我們發(fā)現(xiàn)冗余代碼主要體現(xiàn)在兩個(gè)方面：

// 編譯前代碼.box {  .item {    .item1 {}    .item2 {}    .item3 {}    .item4 {}  }}// 編譯后代碼.box .item .item1 {}.box .item .item2 {}.box .item .item3 {}.box .item .item4 {}

針對(duì) Taro項(xiàng)目 React 框架小程序遇到的以上問(wèn)題，本文將介紹一種新的樣式解決方案。本方案在較少改變現(xiàn)有開(kāi)發(fā)體驗(yàn)的條件下，采用 cssModules 樣式方案語(yǔ)法要求，利用 Taro 插件的便利性給出對(duì)應(yīng)的解決方案，以此對(duì)產(chǎn)物進(jìn)行“瘦身”。最終樣式文件的瘦身效果可以達(dá)到 50% - 70%，進(jìn)一步緩解官方包 Size 的限制，便于業(yè)務(wù)的高速發(fā)展。

本文樣式方案學(xué)習(xí)了 cssModules 解決樣式?jīng)_突的基本原理，并在此基礎(chǔ)上改進(jìn)以達(dá)到縮減樣式文件 Size 的目的。因此在正式了解本方案之前，本文先用 Taro 官網(wǎng)中使用 cssModules 方案的例子代碼作為示例，簡(jiǎn)單了解下其語(yǔ)法要求與原理。

在配置開(kāi)啟了 cssModules 后，按照語(yǔ)法要求，Taro 項(xiàng)目中有 index.module.scss 和 index.js 兩個(gè)文件，文件代碼如下。cssModules 默認(rèn)是開(kāi)啟部分自定義模式轉(zhuǎn)換，只有文件名中包含.module.的樣式文件才會(huì)經(jīng)過(guò) cssModules 轉(zhuǎn)換處理。在如下 index.module.scss 樣式文件中，我們正常使用了父子選擇器、類選擇器。但是在index.js 文件中，className 賦值不再是字符串，而是 SCSS 文件導(dǎo)出的 Object 的某個(gè) Key，該 Key 為 SCSS 文件中的類選擇器的命名。

import React, { Component } from "react"import { View, Text } from "@tarojs/components"import styles from "./index.module.scss"export default class Index extends Component {  render() {    return (              Hello world!          )  }}

.test {  color: red;  .txt {    font-size: 36px;  }}

Taro 項(xiàng)目開(kāi)啟 cssModules 配置后，在編譯打包時(shí)，會(huì)使用實(shí)現(xiàn)了 cssModules 規(guī)范的 css-loader 對(duì) SCSS 等樣式文件進(jìn)行處理。它首先會(huì)處理原 SCSS 文件中的類選擇器，將類名進(jìn)行哈希處理得到新類名如index-module__test___Bm2J6，生成新的樣式代碼輸出到最終的 index.wxss，同時(shí)保存了原類名與哈希處理后的新類名的映射關(guān)系。此后它會(huì)將原 SCSS 文件 index.module.scss 編譯為導(dǎo)出了原類名與哈希后的新類名的映射對(duì)象。JS 文件在運(yùn)行時(shí)能通過(guò)該映射對(duì)象獲取到哈希后的新類名，保證該文件類名不會(huì)與其他樣式文件的同類名沖突，從而解決樣式?jīng)_突問(wèn)題。以下為編譯后的代碼示例，styles.test在運(yùn)行時(shí)會(huì)會(huì)變成index-module__test___Bm2J6。

// index.module.scssexport default ({"test":"index-module__test___Bm2J6","txt":"index-module__txt___nIysk"});

// index.wxss.index-module__test___Bm2J6 {  color: red;}.index-module__test___Bm2J6 .index-module__txt___nIysk {  font-size: 36rpx;}

3.1.1 當(dāng)前樣式文件 size 分析

在正式介紹本文方案是如何縮減樣式文件 Size 之前，本文通過(guò)以下兩個(gè)正則去分別匹配打包產(chǎn)物中所有樣式文件的兩個(gè)核心組成部分 ClassName 與 PropertyValue，并進(jìn)行 Size 統(tǒng)計(jì)分析。

注：在本文中，有如該.txt .tit {color: #red;}CssRule代碼，ClassName指的是其中的txt和tit，PropertyValue指的是color:#red;。

const classNamePattern = /(?<=\.)[A-Za-z0-9\-_]+(?=\s|{|:)/g // 匹配 ClassName 如 .txt {color: #red;}中的txtconst cssPropertyPattern = /(?<=\{)[^}]+(?=})/g // 匹配PropertyValue, 如 .txt {color: #red;}中  中括號(hào)之間的所有內(nèi)容 color: #red;

下圖是對(duì)整個(gè)編譯打包后的小程序項(xiàng)目的樣式文件進(jìn)行組成 Size 分析。通過(guò)該圖我們可以發(fā)現(xiàn)，我們項(xiàng)目打包編譯后的所有的樣式文件中，ClassName 占用大約有五分之一的空間，而 PropertyValue 則占用了有十分之七的空間，其余空間占比可能是如空格、偽類這種形態(tài)存在，本文暫不考慮。

3.1.2 處理方案

通過(guò)上一小節(jié)，我們可以知道一個(gè)樣式文件中核心主要有兩部分內(nèi)容，一是 ClassName，二是 PropertyValue。本文樣式方案對(duì)這兩部分分別進(jìn)行了處理來(lái)達(dá)到節(jié)省 Size 的目標(biāo)。

1）縮減 ClassName 長(zhǎng)度

核心就是將原 ClassName 替換成更短且唯一的 ClassName，在解決樣式?jīng)_突的同時(shí)，也通過(guò)縮減了 ClassName 長(zhǎng)度節(jié)省了 Size。當(dāng)我們使用 cssModules 時(shí)，通常如第二章介紹 cssModules 時(shí)的示例代碼一樣，都是將 ClassName 進(jìn)行 hash 化處理來(lái)保證唯一性，但是經(jīng)過(guò) hash 處理后的 ClassName 長(zhǎng)度反而變得更長(zhǎng)了，不符合我們縮減樣式代碼 Size 的目標(biāo)。

本方案是從最短字符開(kāi)始，逐漸遞增的方式生成全項(xiàng)目唯一的 ClassName，從而保證唯一性的同時(shí)能夠保證 ClassName 長(zhǎng)度盡可能的短。如第一個(gè)解析到的 ClassName 替換成-a，第二個(gè)解析到的ClassName替換成-b，第五十二個(gè)解析到的 ClassName 替換成-Z，第五十三個(gè)解析到的 ClassName 替換成-aa。其中 ClassName 前面的-，用于防止新生成的類名與未轉(zhuǎn)換的類名沖突。此外，新生成的 ClassName 注意需要符合規(guī)則，本插件算法先取prevString中一個(gè)字符，后續(xù)所有字符可以取任意charString中字符。

const prevString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ" // 52個(gè)字符數(shù)const charString = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789-_" // 64個(gè)字符數(shù)

可能有人擔(dān)心，隨著整個(gè)項(xiàng)目中 ClassName 申明的越來(lái)越多，逐漸遞增生成的 ClassName 也會(huì)越來(lái)越長(zhǎng)，反而導(dǎo)致總 ClassName 過(guò)長(zhǎng)。通過(guò)上述算法，算上最前面加上的 -， 當(dāng)使用完三個(gè)字符長(zhǎng)度的類名可 以替換 52 * 64 = 3328 個(gè) ClassName 了，達(dá)到使用完四個(gè)字符長(zhǎng)度需要 52 * 64 * 64 = 212992 個(gè) className。新生成的 ClassName 不超過(guò)四個(gè)字符，就可以滿足大部分項(xiàng)目的使用，使用本樣式方案前可以檢索下自己項(xiàng)目中 ClassName 的量級(jí)。

2）縮減 PropertyValue

通過(guò)上面的分析可以發(fā)現(xiàn)，其實(shí)占據(jù)樣式文件 Size 最多的部分是 PropertyValue，因此縮減 PropertyValue 是本樣式方案能夠節(jié)省大量 Size 的核心手段。其實(shí)我們?cè)陂_(kāi)發(fā)時(shí)用到的樣式屬性值很多都是重復(fù)的，比如開(kāi)發(fā)過(guò)程中用到的最多布局屬性display:flex。每次用到該屬性都需要新寫一份，而且為了兼容性開(kāi)啟了Autoprefixer插件，display:flex將會(huì)變成display:-webkit-flex;display:-ms-flexbox;display:flex;，這使得樣式文件的 Size 變得更大。本插件是通過(guò)盡可能復(fù)用 PropertyValue 的方式來(lái)縮減 PropertyValue。

本插件會(huì)將樣式文件中的僅使用了類選擇器的 CssRule 進(jìn)行 PropertyValue 拆分，每一次拆分都會(huì)生成新的 PropertyValue ClassName。如以下示例代碼，僅類選擇器CssRuletxt被拆分了_a和_b兩個(gè) PropertyValue ClassName。后續(xù)若其他使用僅類選擇器 CssRule 進(jìn)行拆分時(shí)，若有相同的 PropertyValue 就會(huì)直接復(fù)用_a或者_(dá)b。

// 原代碼.txt { display: flex;flex: 1; }// 處理后的代碼._a {display: -webkit-flex; display: -ms-flexbox;display: flex;}._b {-webkit-flex: 1;-ms-flex: 1;flex: 1;}

而在使用 cssModules 樣式寫法的 js 文件中也需要進(jìn)行相應(yīng)的映射處理，通過(guò) babel 插件在編譯時(shí)進(jìn)行轉(zhuǎn)換處理，判斷 css 文件的引用關(guān)系并進(jìn)行替換，示例代碼如下。

// 原代碼import styles from "./index.module.scss"Index = () => {  return }// 處理后的代碼import "./index.module.scss"Index = () => {  return }

本樣式方案通過(guò)對(duì)僅使用了類選擇器的 CssRule 的 PropertyValue 拆分成新的 PropertyValue ClassName，后續(xù)任何進(jìn)行拆分的地方就可以直接復(fù)用該 PropertyValue ClassName，從而可以大量縮減 PropertyValue 重復(fù)冗余占用的 Size。

3）插件處理流程

以上兩小節(jié)已經(jīng)介紹了兩個(gè)核心縮減 Size 的方案，本小節(jié)舉一個(gè)更加全面的例子來(lái)介紹本插件是如何在編譯時(shí)運(yùn)用以上兩個(gè)方案，對(duì)樣式文件和 JS 文件進(jìn)行處理轉(zhuǎn)化的。主要有以下兩步。

第一步，針對(duì)僅使用類選擇器的 CssRule，進(jìn)行 PropertyValue 拆分。如下示例代碼中，.box{display:flex}拆分出了._a {display: -webkit-flex;display: -ms-flexbox;display: flex;}，后續(xù).item1` `.item2拆分時(shí)，直接復(fù)用了._a，縮減了 PropertyValue 重復(fù)冗余。

第二步，針對(duì)非僅使用類選擇器的 CssRule，直接替換成全局唯一且更短的 ClassName。如下示例代碼中，.box .item2{color: red;}，原選擇器中的 ClassName 直接替換成了更短的.-a .-b{ color: red;}，并且添加了該映射關(guān)系styles = {box: "_a -a", item1: "_a _b _c", item2: "_a _b _d -b"}，并在編譯時(shí)進(jìn)行替換。

// 原代碼import React from "react"import styles from "./index.module.scss"export default Index = () => {  return     item1    item2  }// 處理后的代碼import React from "react"import "./index.module.scss"http:// styles = {box: "_a -a", item1: "_a _b _c", item2: "_a _b _d -b"}export default Index = () => {  return     item1    item2  }

// 原index.module.scss代碼.box {    display: flex;}.item1{    display: flex;    font-size: 32px;    color: red;}.item2{    display: flex;    font-size: 32px;    color: grey;}.box .item2{    color: red;}// 處理后index.module.scss代碼._a {display: -webkit-flex;display: -ms-flexbox;display: flex;}._b {font-size: 32px;}._c {color: red;}._d {color: grey;}.-a .-b{    color: red;}

3.2.1 styles 對(duì)象的屬性不支持運(yùn)行時(shí)

cssModules 方案中，JS 文件中引入的樣式文件對(duì)象支持運(yùn)行時(shí)計(jì)算屬性的，如以下示例寫法。這是因?yàn)樵诖虬蟮?JS 文件中，保存有一份原 ClassName 與 hash 后新 ClassName 映射關(guān)系的對(duì)象數(shù)據(jù)，因此運(yùn)行時(shí) styles 還能映射屬性，但是這種處理方式會(huì)導(dǎo)致 js 文件 size 增大。

import styles from "./index.module.scss"const Index = () => {  return }

本方案為了盡可能保證項(xiàng)目 Size 足夠小，并沒(méi)有采用 cssModules 這種處理方式。本方案在編譯時(shí)會(huì)直接對(duì)原 CLassName 與拆分 PropertyValue 后的新 ClassName 直接進(jìn)行了替換，如直接把className={styles.txt}替換成className="_a _b"。

因此本方案styles對(duì)象不支持如上示例代碼中，運(yùn)行時(shí)計(jì)算得到txt屬性，如需動(dòng)態(tài)調(diào)整樣式有兩種方案，一是直接使用內(nèi)聯(lián)樣式。二是新寫 ClassName 而不是拼接，如className={value ? styles.txt1 : styles.txt2}}。

3.2.2 僅類選擇器不依賴先后順序定優(yōu)先級(jí)

在上文中，提到過(guò)會(huì)拆分僅使用類選擇器 CssRule，來(lái)盡可能復(fù)用已有的 PropertyValue ClassName。但是這種復(fù)用是有缺陷的，它會(huì)導(dǎo)致 ClassName 的先后順序可能不符合預(yù)期，如下代碼所示，通常來(lái)說(shuō)我們認(rèn)為標(biāo)題顏色應(yīng)當(dāng)是grey。

// 原代碼import styles from "./index.module.scss"const Index = () => {  return 標(biāo)題}// 處理后的代碼import styles from "./index.module.scss"const Index = () => {  return 標(biāo)題}

// 原代碼.other { color: green; color:red; }.tit1 { color: red; }.tit2 { color: green; }// 處理后的代碼._a {color:green;}._b {color:red;}

但是經(jīng)過(guò)本插件復(fù)用了 PropertyValue 后，導(dǎo)致._b{color:red;}出現(xiàn)在了._a{color:green;}后面了，此時(shí)標(biāo)題的顏色也就變成了red，從而可能不符合開(kāi)發(fā)者預(yù)期。

因此需要注意在編寫僅類選擇器 CssRule 的 ClassName 時(shí)，不能依賴類選擇器先后順序來(lái)定優(yōu)先級(jí)，可通過(guò)兄弟選擇器來(lái)將優(yōu)先級(jí)提的更高，從而不受先后順序影響，如下代碼示例。這樣就能確定標(biāo)題顏色一定是green。

// 兄弟選擇器來(lái)提高優(yōu)先級(jí).other { color: green; color:red; }.tit1 { color: red; }.tit1.tit2 { color: green; }

4.1.1 安裝插件

本樣式方案被集成在該 Taro 插件taro-plugin-split-class中，安裝本插件。源碼見(jiàn)倉(cāng)庫(kù)taro-plugin-split-class。

npm install -D taro-plugin-split-class

4.1.2 關(guān)閉cssModules功能

在 Taro 配置文件中，使得mini.posetcss.cssModules.enable = false，確保 cssModules 功能關(guān)閉，如下代碼所示。

// config/index.js{    mini: {        postcss: {            cssModules: {                enable: false           }        }    }}

4.1.3 配置本插件

在 Taro 配置文件中，plugins配置中加入本插件taro-plugin-split-class。本插件支持配置類名轉(zhuǎn)換白名單（實(shí)現(xiàn)功能類似 : global，見(jiàn) 2.4）classNameWhite，比如常用的 iconfont 是不需要轉(zhuǎn)換的。

plugins: [    ["taro-plugin-split-class", {      classNameWhite: ["iconfont", /^ifont-/]    }]]

a.樣式文件命名需以 .module.xxx 結(jié)尾，如 index.module.scss，該樣式文件方可被本插件轉(zhuǎn)化處理。

b. 在 JS 文件中，將樣式文件作為一個(gè)對(duì)象引入，并將類名作為對(duì)象的鍵進(jìn)行使用。如下代碼所示，使用className={styles.box}而不是className="box"，其中box為定義在樣式文件的中類名。

// 如下import styles from "./index.module.scss"// 而不是import "./index.module.scss"

c. 本方案支持所有選擇器包括父子選擇器、偽類選擇器、兄弟選擇器等等。但請(qǐng)盡可能的使用僅類選擇器來(lái)定位元素，這樣做可以便于插件盡可能復(fù)用 PropertyValue 從而更好的縮減 Size。本方案解決了類名沖突問(wèn)題，因此開(kāi)發(fā)者不需要擔(dān)心因類名命名簡(jiǎn)單而導(dǎo)致的類名沖突。

// 如下僅類選擇器的CssRule.box {    display: flex;    flex-direction: column;    align-items: center;}.tit {    display: flex;    font-size: 40px;    color: red;}// 而不是父子選擇器.box {    display: flex;    flex-direction: column;    align-items: center;    .tit {        display: flex;        font-size: 40px;        color: red;    }}

d. 特殊類名不變

有時(shí)候我們希望一些特殊的 ClassName 不變，在 JS 文件中，不從 styles 取類名即可，如下代碼中的extra。

import styles from "./index.module.scss"標(biāo)題

但是在樣式文件中默認(rèn)所有 ClassName 都會(huì)被拆分或者壓縮。如下代碼示例，extra被處理成-a。

// 原類名.extra.tit {color: blue;}// 新類名.-a.-b {    color: blue;}

因此需要特殊標(biāo)識(shí)符讓插件感知到不需要處理該 ClasName。本方案提供了類似 cssModules 的:global的解決方案，有兩種使用方式，一是:global(.extra)，被包裹的類名不會(huì)被替換。

// 編譯前:global(.extra).tit {  color: blue;}// 編譯后.extra.-a {    color: blue;}

二是以:global開(kāi)頭，后續(xù)所有的類名都不會(huì)被替換。

// 編譯前:global .extra1 .extra2 { color: red;}// 編譯后.extra1 .extra2 { color: red;}

4.3.1 開(kāi)發(fā)環(huán)境

使用本插件后，原類名會(huì)被替換或拆分成更短且更多的新類名。這樣處理后的新類名可讀性很差，開(kāi)發(fā)者不能很好的定位到原類名代碼。因此在開(kāi)發(fā)環(huán)境下，會(huì)在更短且更多的新類名前會(huì)加上[文件夾_文件名_原類名]。保留了原類名相關(guān)信息，便于開(kāi)發(fā)者查找原類名。如下圖代碼所示，原類名為box，經(jīng)過(guò)插件拆分和縮短后的新類名為_(kāi)a _g _h -c，在新類名前加上了index_indes-module_box，最終展示的完整類名為index_index-module_box _a _g _h -c。

4.3.2 生產(chǎn)環(huán)境

在生產(chǎn)環(huán)境了，不需要考慮新類名可讀性，因此直接會(huì)直接將類名完全替換為新類名。如下圖代碼所示，box直接被替換成_a _g _h -c。

5.1.1 頁(yè)面改造前后對(duì)比

在使用本樣式方案對(duì)某個(gè)頁(yè)面進(jìn)行改造后，改造前后 Size 對(duì)比如下?？梢园l(fā)現(xiàn)樣式文件縮減了 44KB，縮減了將近 70% 的 Size，JS 文件有這 2kb 的增長(zhǎng)。

使用前編譯后文件 Size 如下圖：

使用后編譯后文件 Size 如下圖：

5.1.2 重構(gòu)頁(yè)面橫向?qū)Ρ?/strong>

最近我們項(xiàng)目重構(gòu)了兩個(gè)大型訂單詳情頁(yè)面，本小節(jié)以這兩個(gè)頁(yè)面重構(gòu)后的代碼為例，分析編譯打包前后的 Size 并進(jìn)行橫向?qū)Ρ取?/p>

整理出如下表格：

兩訂單詳情頁(yè)代碼組織結(jié)構(gòu)類似，因此將它們進(jìn)行橫向?qū)Ρ?。未采用本樣式方案的訂單詳情?yè) 1 的樣式編碼字符數(shù)為 3620，打包后實(shí)際 Size 為 86kb。若訂單詳情頁(yè) 2 未使用本樣式方案，打包前樣式編碼字符數(shù)為 6615，則預(yù)期打包后實(shí)際 Size 為 6615 / 3620 \* 86kb = 157kb，但訂單詳情頁(yè)使用了本樣式方案實(shí)際打包后為 73kb，相對(duì)于 157kb，縮減了 50% 左右的 Size。

以下為未使用本樣式方案的訂單詳情頁(yè) 1，該目錄下樣式文件包括了 50 個(gè)樣式文件，共計(jì) 3620 個(gè)字符，最終打包出來(lái)的樣式文件的 Size 為 86kb。

以下為使用了本樣式方案的訂單詳情頁(yè) 2，該目錄下樣式文件包括了 96 個(gè)樣式文件，共計(jì) 6615 個(gè)字符，最終打包出來(lái)的樣式文件 Size 為 73kb。

// 編譯前代碼.box {  .item {  .item1 {}  .item2 {}  .item3 {}  .item4 {}  }}// 編譯后代碼.box .item .item1 {}.box .item .item2 {}.box .item .item3 {}.box .item .item4 {}