Summary of some exquisite methods in webpack source code

Preface

During the Chinese New Year, I have been studying the source code of webpack. Because the atmosphere around the Chinese New Year is relatively cheerful and my mentality is a bit floating, I don’t calm down and study the details carefully. After reflection, I carefully straightened out the source code of webpack and found that many clever methods are worth learning. I can't wait to share it with you here, hoping it will be helpful to you during your normal development process.

Exquisite method

Cache function

The most exquisite thing about this method is to cache the execution results, reduce the repeated execution of functions to achieve the purpose of improving performance, and the more complex and time-consuming the function, the greater the profit. but,Functions not suitable for dynamic execution results。

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

This method is somewhat similar to a lazy function. It only executes when the function is called for the first time. The execution result of fn() is cached to result, and then set cache to true to mark the cache is enabled. There is another detail worth learning here: Due to closure, the fn method is held by a new function and has been unable to be released in the call stack. There is a sentence in the codefn = undefined, manually release memory.

Attribute Hijacking

This method redefines the attributes of obj by customizing the get method or value value. The result of the implementation is a bit similar, but not exactly the same. By defining the get attribute descriptor of name, the value of obj will never change; by setting the writable of name to false, the value of obj will not be changed.

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

Here is a small knowledge point:Ensure that the attribute cannot be deleted by setting the configurable attribute descriptor of the attribute to false。

Array comparison

Compare whether the two arrays are equal. I believe everyone knows that if you use == for array comparison, you are comparing the reference addresses, so if you want to judge that there is no way to compare the two arrays directly. This method in webpack source code provides me with a way to compare arrays. Of course, this method is only suitable for flattened one-dimensional basic type arrays. If you want to have more complex situations, you need to slightly modify it based on the for loop.

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

Configuration item verification

The implementation of webpack has a lot of code, so let's just talk about the general implementation idea, by defining the Schema verification rules for all configuration items that need to be verified. The general Schema format is as follows:

    "Amd": {
        "description": "Set the value of `` and ``. 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 `` and ``.",
                "type": "object"
            }
        ]
    },

The key corresponds to the configuration items that need to be checked, the description in the value corresponds to the prompt information, and the rest corresponds to the verification rules.

Ending

This is the end of this article about some exquisite methods in webpack source code. For more information about webpack source code, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!