快捷導(dǎo)航

webpack源碼中一些精妙的方法總結(jié)

更新時(shí)間：2022年02月11日 15:07:43 作者：花開花落花中妖

正好最近在學(xué)習(xí)webpack的源碼,所以下面這篇文章主要給大家介紹了關(guān)于webpack源碼中一些精妙的方法的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

過年這一段時(shí)間一直在研究webpack的源碼，由于過年周圍氣氛比較歡快，心態(tài)有點(diǎn)飄導(dǎo)致沒有沉下心來仔細(xì)研究其中的細(xì)節(jié)。經(jīng)過反思之后，靜心重新捋順webpack的源碼，這時(shí)發(fā)現(xiàn)不少巧妙的方法值得學(xué)習(xí)。這里我已經(jīng)迫不及待的跟大家分享了，希望對大家平常開發(fā)過程中有所幫助。

精妙方法

緩存函數(shù)

這個(gè)方法最精妙的地方在于將執(zhí)行結(jié)果緩存，減少函數(shù)的重復(fù)執(zhí)行以達(dá)到提升性能的目的，對于執(zhí)行越復(fù)雜越耗時(shí)的函數(shù)收益越大。但是，不適用于動(dòng)態(tài)執(zhí)行結(jié)果的函數(shù)。

    const memoize = fn => {
        let cache = false;
        let result = undefined;
        return () => {
            if (cache) {
                return result;
            } else {
                result = fn();
                cache = true;
                fn = undefined;
                return result;
            }
        };
    };

這個(gè)方法跟惰性函數(shù)有點(diǎn)相似，只在函數(shù)第一次調(diào)用的時(shí)候執(zhí)行，將fn()的執(zhí)行結(jié)果緩存到result上，然后通過cache設(shè)置為true來標(biāo)記緩存已開啟。這里還有個(gè)細(xì)節(jié)值得學(xué)習(xí)：由于閉包的原因，fn方法被新的函數(shù)持有，一直在調(diào)用棧中得不到釋放，而在代碼中有一句fn = undefined，手動(dòng)釋放內(nèi)存。

屬性劫持

這個(gè)方法通過自定義get方法或者value值來重定義obj的屬性。實(shí)現(xiàn)的結(jié)果有點(diǎn)類似于Object.freeze，但又不完全相同。通過Object.defineProperty定義name的get屬性描述符來保證obj的值永遠(yuǎn)不變；通過Object.defineProperty來將name的writable設(shè)置為false來保證obj的value不會被改變。

    const mergeExports = (obj, exports) => {
        ...
        for (const name of Object.keys(descriptors)) {
            const descriptor = descriptors[name];
            if (descriptor.get) {
                const fn = descriptor.get;
                Object.defineProperty(obj, name, {
                    configurable: false,
                    enumerable: true,
                    get: memoize(fn)
                });
            } else if (typeof descriptor.value === "object") {
                Object.defineProperty(obj, name, {
                    configurable: false,
                    enumerable: true,
                    writable: false,
                    value: mergeExports({}, descriptor.value)
                });
            } else {
                ...
            }
        }
        return Object.freeze(obj);
    };

這里還有個(gè)小的知識點(diǎn)：通過將屬性的configurable屬性描述符設(shè)置為false來保證屬性不可被刪除。

數(shù)組比較

進(jìn)行兩個(gè)數(shù)組是否相等的比較。想必大家都知道，如果使用==進(jìn)行數(shù)組比較的話，是進(jìn)行引用地址的比較，所以想要判斷兩個(gè)數(shù)組是沒有方法進(jìn)行直接比較的。而webpack源碼中的這個(gè)方法給我提供了一種數(shù)組比較的方式。當(dāng)然了，這個(gè)方法只適用于扁平化的一維基本類型數(shù)組，如果想要比較復(fù)雜的情況的話，需要在for循環(huán)的基礎(chǔ)上稍加改造。

    exports.equals = (a, b) => {
        if (a.length !== b.length) return false;
        for (let i = 0; i < a.length; i++) {
            if (a[i] !== b[i]) return false;
        }
        return true;
    };

配置項(xiàng)校驗(yàn)

webpack中的實(shí)現(xiàn)的代碼量比較多，我們就只說一下大體實(shí)現(xiàn)思路，通過定義需要校驗(yàn)的所有配置項(xiàng)的Schema校驗(yàn)規(guī)則。大體Schema格式如下：

    "Amd": {
        "description": "Set the value of `require.amd` and `define.amd`. Or disable AMD support.",
        "anyOf": [
            {
                "description": "You can pass `false` to disable AMD support.",
                "enum": [false]
            },
            {
                "description": "You can pass an object to set the value of `require.amd` and `define.amd`.",
                "type": "object"
            }
        ]
    },

其中key對應(yīng)的是需要校驗(yàn)的配置項(xiàng)，value中的desciption對應(yīng)的是提示信息，其余部分對應(yīng)的是校驗(yàn)規(guī)則。