作者簡介

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

一、概述

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

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

• 項(xiàng)目樣式文件中大量使用了父子選擇器作為作用域進(jìn)行樣式隔離，編譯后出現(xiàn)類名大量重復(fù)冗余。如以下 SCSS 文件樣式代碼中，編譯后 .box .item 重復(fù)冗余了三次。

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

• 樣式代碼中大量屬性值重復(fù)冗余。如最常用的 display: flex 屬性值，在項(xiàng)目中可能存在幾百上千份重復(fù)冗余，而且為了兼容性開啟了 Autoprefixer 插件后， display:flex 將會變成 display:-webkit-flex;display:-ms-flexbox;display:flex; ，使得樣式文件屬性值的冗余情況更為嚴(yán)重。

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

二、cssModules 簡單介紹

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

2.1 語法要求

在配置開啟了 cssModules 后，按照語法要求，Taro 項(xiàng)目中有 index.module.scss 和 index.js 兩個(gè)文件，文件代碼如下。cssModules 默認(rèn)是開啟部分自定義模式轉(zhuǎn)換，只有文件名中包含 .module. 的樣式文件才會經(jīng)過 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 (
      <View className={styles.test}>
        <Text className={styles.txt}>Hello world!</Text>
      </View>
    )
  }
}

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

2.2 原理

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

// index.module.scss
export 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 基本原理

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

在正式介紹本文方案是如何縮減樣式文件 Size 之前，本文通過以下兩個(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;}中的txt
const cssPropertyPattern = /(?<=\{)[^}]+(?=})/g // 匹配PropertyValue, 如 .txt {color: #red;}中  中括號之間的所有內(nèi)容 color: #red;

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

3.1.2 處理方案

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

1）縮減 ClassName 長度

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

本方案是從最短字符開始，逐漸遞增的方式生成全項(xiàng)目唯一的 ClassName，從而保證唯一性的同時(shí)能夠保證 ClassName 長度盡可能的短。如第一個(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 申明的越來越多，逐漸遞增生成的 ClassName 也會越來越長，反而導(dǎo)致總 ClassName 過長。通過上述算法，算上最前面加上的  -  ， 當(dāng)使用完三個(gè)字符長度的類名可 以替換 52 * 64 = 3328 個(gè) ClassName 了，達(dá)到使用完四個(gè)字符長度需要 52 * 64 * 64 =  212992 個(gè) className。新生成的 ClassName 不超過四個(gè)字符，就可以滿足大部分項(xiàng)目的使用，使用本樣式方案前可以檢索下自己項(xiàng)目中 ClassName 的量級。

2）縮減 PropertyValue

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

本插件會將樣式文件中的僅使用了類選擇器的 CssRule 進(jìn)行 PropertyValue 拆分，每一次拆分都會生成新的 PropertyValue ClassName。如以下示例代碼，僅類選擇器CssRule txt 被拆分了 _a 和 _b 兩個(gè) PropertyValue ClassName。后續(xù)若其他使用僅類選擇器 CssRule 進(jìn)行拆分時(shí)，若有相同的 PropertyValue 就會直接復(fù)用 _a 或者 _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)的映射處理，通過 babel 插件在編譯時(shí)進(jìn)行轉(zhuǎn)換處理，判斷 css 文件的引用關(guān)系并進(jìn)行替換，示例代碼如下。

// 原代碼
import styles from './index.module.scss'
Index = () => {
  return <View className={styles.txt} />
}
// 處理后的代碼
import './index.module.scss'
Index = () => {
  return <View className="_a _b" />
}

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

3）插件處理流程

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

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

第二步，針對非僅使用類選擇器的 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 <View className={styles.box}>
    <View className={styles.item1}>item1</View>
    <View className={styles.item2}>item2</View>
  </View>
}
// 處理后的代碼
import React from 'react'
import './index.module.scss'
// styles = {box: "_a -a", item1: "_a _b _c", item2: "_a _b _d -b"}
export default Index = () => {


  return <View className="_a -a">
    <View className="_a _b _c">item1</View>
    <View className="_a _b _d -b">item2</View>
  </View>
}

// 原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 需要注意的問題

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

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

import styles from './index.module.scss'
const Index = () => {
  return <View className={styles['t' + 'xt']} />
}

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

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

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

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

// 原代碼
import styles from './index.module.scss'
const Index = () => {
  return <View className={styles.tit1 + ' ' + styles.tit2}>標(biāo)題</View>
}
// 處理后的代碼
import styles from './index.module.scss'
const Index = () => {
  return <View className={'_a' + ' ' + '_b'}>標(biāo)題</View>
}

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

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

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

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

四、使用指南

4.1 使用

4.1.1 安裝插件

本樣式方案被集成在該 Taro 插件 taro-plugin-split-class 中，安裝本插件。源碼見倉庫 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，見 2.4）classNameWhite，比如常用的 iconfont 是不需要轉(zhuǎn)換的。

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

4.2 語法要求

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

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

// 如下
import styles from './index.module.scss'
<View className={styles.box}></View>
// 而不是
import './index.module.scss'
<View className="box"></View>

c. 本方案支持所有選擇器包括父子選擇器、偽類選擇器、兄弟選擇器等等。但請盡可能的使用僅類選擇器來定位元素，這樣做可以便于插件盡可能復(fù)用 PropertyValue 從而更好的縮減 Size。本方案解決了類名沖突問題，因此開發(fā)者不需要擔(dā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'
<View className={styles.tit + ' extra'}>標(biāo)題</View>

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

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

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

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

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

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

4.3 打包效果展示

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

使用本插件后，原類名會被替換或拆分成更短且更多的新類名。這樣處理后的新類名可讀性很差，開發(fā)者不能很好的定位到原類名代碼。因此在開發(fā)環(huán)境下，會在更短且更多的新類名前會加上[文件夾_文件名_原類名]。保留了原類名相關(guān)信息，便于開發(fā)者查找原類名。如下圖代碼所示，原類名為 box ，經(jīng)過插件拆分和縮短后的新類名為 _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)境了，不需要考慮新類名可讀性，因此直接會直接將類名完全替換為新類名。如下圖代碼所示， box 直接被替換成 _a _g _h -c 。

五、方案分析

5.1 實(shí)踐效果

5.1.1 頁面改造前后對比

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

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

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

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

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

整理出如下表格：

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

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

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

5.2 Size 縮減效果分析

以上兩個(gè)實(shí)踐效果，相較于項(xiàng)目中原樣式寫法方案，使用本方案后，主要從以下三個(gè)方面節(jié)省了 Size。

a. 本方案解決了樣式?jīng)_突問題，編寫樣式代碼時(shí)可以不再用父子選擇器的方式來進(jìn)行樣式作用域隔離，減少了祖先選擇器的冗余。如下使用了 sass 預(yù)處理器的樣式代碼所示，我們可以發(fā)現(xiàn)在最終編譯生成的代碼中， .box .item 冗余了三次，而且若繼續(xù)在 .box .item 下每新增一個(gè)葉子節(jié)點(diǎn) .item* ， .box .item 都會冗余一次。因此項(xiàng)目中使用父子選擇器這種方式來隔離作用域，會導(dǎo)致大量的祖先選擇器冗余。

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

b. 將原 ClassName 直接縮短成更短的 ClassName，直接減少了字符數(shù)。這種方式較為直接，但優(yōu)化效果有限。

c. 本方案盡可能拆分樣式文件中僅類選擇器的 CssRule，生成并復(fù)用 PropertyValue ClassName，盡可能減少了 PropertyValue 的重復(fù)冗余。雖然在 JS 文件中 ClassName 被替換成更短但更多的 PropertyValue ClassName，有一定的 Size 增加，如在實(shí)踐效果 1 中，實(shí)踐后 JS 文件有 2KB 的增長。但是相比于樣式文件 Size 上的縮減效果可以忽略不計(jì)。

5.3 Size 增長分析

隨著樣式文件越多，采用本樣式方案的項(xiàng)目，樣式文件 Size 增長幅度將增長會越緩慢。本方案要求以僅類選擇器的方式為主，少量場景使用其他選擇器為輔的方式進(jìn)行編寫樣式代碼。隨著項(xiàng)目中樣式代碼越來越多，僅類選擇器 CssRule 經(jīng)過本插件處理拆分生成的可復(fù)用的 PropertyValue CssRule 會越來越多。此時(shí)，在按要求新寫僅類選擇器 CssRule 使用到某個(gè) PropertyValue 時(shí)，可復(fù)用的概率會更高。高概率的每一次復(fù)用都會節(jié)省一部分 Size，使得最終編譯打包后生成的樣式文件 Size 增長曲率逐漸放緩。

六、總結(jié)

針對 Taro 項(xiàng)目 React 框架小程序，本文介紹了一種新的樣式解決方案，該方案被集成為一個(gè) Taro 插件的形式，可以在在較少改變現(xiàn)有開發(fā)體驗(yàn)的條件下，緩解樣式代碼的冗余問題。

本樣式方案學(xué)習(xí)借鑒了 cssModules 樣式方案的語法規(guī)則以及原理，解決了樣式?jīng)_突的問題，并且在此基礎(chǔ)上從縮減 ClassName 長度和縮減 PropertyValue 兩個(gè)方面實(shí)現(xiàn)了 Size 上的縮減，最終樣式文件的瘦身效果可以達(dá)到 50%-70%。這有利緩解官方包 Size 的限制，便于業(yè)務(wù)的高速發(fā)展。

七、vscode 插件推薦

本方案基本語法跟 cssModules 一致，因此可以直接借助現(xiàn)有的 cssModules 插件，提升開發(fā)體驗(yàn)。

7.1 CSS-Modules-transform 插件

該插件支持讓項(xiàng)目現(xiàn)有 JS 代碼快速轉(zhuǎn)成 cssModules 語法，將原類名使用方式，一鍵替換成本方案要求的類名使用語法，如 classname="a1" => className={styles.a1} 。需要注意的是，一鍵替換只支持非運(yùn)行時(shí)的語法，運(yùn)行時(shí)的語法還是需要手動替換?？梢愿咝岣攥F(xiàn)有樣式方案轉(zhuǎn)化效率。

7.2 CSS Modules 插件

CSS Modules 插件支持自動補(bǔ)全和類型定義，提高開發(fā)體驗(yàn)。

八、文章參考

• GitHub - css-modules/css-modules: Documentation about css-modules
• cssModules插件