antd圖示庫按需載入的外掛實現

福祿網路技術團隊發表於2020-07-06

前景概要

antd是阿里出品的一款基於antd的UI元件庫，使用簡單，功能豐富，被廣泛應用在中臺專案開發中，雖然也出現了彩蛋事故，但不能否認antd本身的優秀，而我們公司在實際工作中也大量使用antd進行開發，使用的版本主要集中在3.x這個大版本中，在實際使用過程中發現了一個比較明顯的問題，那就是antd的圖示輸出打包體積過大，即便是使用了一個圖示，也會將所有圖示打包輸出，沒有按需載入(4.x版本已經實現了按需載入，但目前公司還沒做整體的升級)，在這種情況下，就亟需一款能按需載入的外掛來減小圖示輸出的體積。

解決思路

定位了問題，接下來就是想辦法解決了，前期在網上搜尋到一種解決辦法，那就是在webpack中的配置圖示檔案路徑，具體如下：

resolve: {
  alias: {
    '@ant-design/icons/lib/dist$': './youIcon.js',
  }
}

youIcon.js中匯出使用到的圖示，通過這種方式能極大減小靜態資源輸出的體積，但是這一過程是手動配置，維護和使用不是很方便，藉助這種解決方式，加上動態生成本地youIcon.js檔案就可以了，確定瞭解決思路，接下來就動手設計外掛。

外掛設計

1.執行流程

圖片描述

2.功能設計

如上圖所示，我們需要的外掛需要滿足兩個功能，第一，動態提取專案原始碼和使用到的antd元件中的圖示，第二，修改webpack的alias配置，接下來將分別講述設計過程：

1.動態提取圖示

提取圖示，需要對目標檔案進行程式碼分析，提取圖示程式碼的相關特徵，然後整理輸出到本地的目標檔案下，過程如下圖：
圖片描述
1.) 特徵匹配
利用babel將原始碼編譯輸出，然後得到icon的生成程式碼，結合astexplorer分析節點屬性，確定出匹配方案，這裡還需要注意一點的是，有些元件在生成圖示的過程中比較特殊，比如Button可以通過loading和icon屬性設定，在匹配的時候需要特殊處理；
2.) 屬性提取
在提取圖示的過程中，得到了圖示的屬性後，需要和本地node_modules裡面的@ant-design/icon/lib/dist的所有官方匯出庫匹配，找到目標圖示，就能確定圖示的有效性；
3.) 字串拼接寫入
將圖示名稱和定址路徑拼接起來，再、在寫入antd-icon-reduce.js檔案之前，判斷是否已經存在相同的圖示名稱，如果存在則放棄寫入，經過上述步驟就可以將專案中用到的所有圖示全部收集到antd-icon-reduce.js檔案中了。

2.動態修改配置

動態修改配置依賴於antd-icon-reduce-plugin外掛來實現，其中的工作原理如下圖：
圖片描述
1.) 初始化
在外掛初始化的時候，外掛主要乾了兩件事，第一，生成antd-icon-reduce.js檔案，然後將這個檔案路徑傳遞給antd-icon-reduce-loader，第二，新增專門匹配node_modules/antd目錄下的所有js檔案，確保專案中使用到的元件都能被loader處理，經過初始化之後，專案就有了存放匯出的圖示檔案，更重要的是適配了所有可能生成圖示的原始檔；
2.) 配置檔案
當loader執行完成之後，我們就得到了一份完整的圖示匯出檔案(antd-icon-reduce.js)，這個時候就需要修改webpack的alias了，這裡需要在每次loader執行完成後都重新生成一份檔案(內容拷貝至antd-icon-reduce.js檔案)，檔名需要動態更新，確保每次webpack記憶體載入的配置檔案都是最新的；
3.) 檔案刪除
在編譯輸出完成後，需要清除antd-icon-reduce.js和另一份配置檔案，這裡都是在webpack相應的hooks裡面實現，具體可以參考外掛原始碼。

3.外掛實現

上面也介紹到，此次涉及到兩個外掛，下面分別簡單講述一下具體的編碼實現：

1.antd-icon-reduce-loader

loader的主要實現如下：

module.exports = function(source) {
    parseOptions.call(this);
    ......
    var ast = parser.parse(source, { sourceType: "module", plugins: ['dynamicImport'] }); // 解析原始碼，獲取ast物件
    traverse(ast, {
        CallExpression: function(path) { // 匹配所有呼叫表示式
		    ......
                if (isCreateIcon(Identifier)) { // Icon元件
                        var iconProps = getIconProps(ObjectExpression.properties);
                       if (Object.keys(iconProps).length > 0) {
                            var type = iconProps.type;
                            var theme = iconProps.theme || 'outline';
                            if (isArray(type)) {  // 三元符情況下，type值不止一個
                                type.forEach(function(item) {
                                    searchIconByName(item, theme);
                                });
                            } else {
                                searchIconByName(type, theme);
                            }
                        }
                    } else if (isButton(Identifier)) { // Button元件
                        var btnProps = getBtnProps(ObjectExpression.properties);
                        Object.keys(btnProps).forEach(function(k) {
                            searchIconByName(k === 'loading' ? k : btnProps[k]);
                        });
                }
        },
    });
    return core.transformFromAstSync(ast).code;
};
2.antd-icon-reduce-plugin

AntdIconReducePlugin.prototype.apply = function(compiler) {
    ......
    const rules = compiler.options.module.rules;
    rules.forEach(function(ruleItem) {
        ......
                if (ruleItem.use[i] === 'ant-icon-reduce-loader') {
                    ruleItem.use[i] = {
                        loader: loaderName,
                        options: {
                            filePath: tempFilePath, // 給loader新增臨時路徑配置
                        },
                    };
                    ......
                }
       ......
    });
    // 新增專門匹配antd依賴包的loader配置
    rules.push({
        test: (filePath) => {
            if (filePath.indexOf(antdModulePath) >= 0 && path.extname(filePath) === '.js') {
                return true;
            }
            return false;
        },
        use: [{
            loader: "antd-icon-reduce-loader",
            options: {
                filePath: tempFilePath, 
            },
        }]
    });
 ......
};

外掛使用

1.安裝依賴項

npm i antd-icon-reduce-loader antd-icon-reduce-plugin -D

2.webpack配置

1.新增antd-icon-reduce-loader

......
 module: {
    rules: [
        {
            test: /\.js(x)?$/,
            exclude: /node_modules/,
            use: ["antd-icon-reduce-loader", "babel-loader"],
        }
    ],
},
......

2.新增antd-icon-reduce-plugin外掛

......
var AntdIconReducePlugin = require('antd-icon-reduce-plugin');
......
 plugins: [
    ......
    new AntdIconReducePlugin({
            icons: ['download', { type: 'up', theme: 'outline' }], // 自定義需要加入的圖示，在外掛不能解析原始碼的情況下使用 
		development： true, // 開發模式下執行外掛，預設true
    }),
    ......
]

外掛效果展示

圖片描述
從上圖中可以看到使用了外掛之後，main.js體積減小了差不多500kb左右，效果還是比較明顯(這只是演示外掛效果，沒有做其他輸出優化)。

注意事項

  • 外掛只能處理使用字串字面量來定義Icon型別，使用變數或者其他賦值方式將會被忽略，只有如下兩種方式可以被識別:

1.字串字面量直接定義

<Icon type="down" />

2.三元符

const isUp = true;
......
<Icon type={isUp ? 'up' : 'down'}
  • 在其他未識別的情況下，需要通過外掛的icons屬性手動傳入圖示。

最後

該外掛是基於react+antd+webpack的基礎上使用，其中antd適用於3.x大版本，webpack為4.x版本，如果在使用過程中有任何問題，歡迎聯絡我，
github地址：https://github.com/fuluteam/antd-icon-reduce-plugin

相關文章