Webpack源码分析 - loader及优化

朱雀 2023-07-04 11:11 163阅读 0赞

loader解析文件是Webpack中重要的一环，之所以能一切皆模块就是因为有许多强大的loader提供的支持。了解它的工作原理可以让我们从容地为项目选择合适的配置，还可以更有目的性的针对性能瓶颈分析优化，更好地做一个合格地Webpack配置工程师。

如果要了解loader内部执行原理，可以看这篇文章loader-runner

## loader基础 ##

loader的配置非常灵活，以至于关于loader的代码有一大半是在解析参数，所以要看懂代码就要先清楚常用的配置，如果在翻阅代码时看着比较奇怪，可以先回来看看这段代码到底是处理哪一类配置，下面列举了一些常用的选项：

## loader执行顺序 ##

在执行loader前，Webpack已经将其根据配置排好序，指定顺序会在创建loader阶段执行：

*  正常情况loader执行顺序: pre -> normal -> inline -> post
 *  资源路径前使用'xxx!=!'装饰: pre -> inline -> normal -> post
 *  资源路径前使用'-!'装饰: inline -> post
 *  资源路径前使用'!'装饰: pre -> inline -> post
 *  资源路径前使用'!!'装饰: inline

### 全局配置 ###

rules: [
        // 前置
        { enforce: 'pre', test: /\.js$/, use: 'babel-loader' },
        // 正则匹配
        { test: /\.js$/, use: 'babel-loader' },
        // 后置
        { enforce: 'post', test: /\.js$/, use: 'babel-loader' },
    ]
    前端学习裙：950.919。261

### inline配置 ###

// 普通
    require('babel-loader!./increment.js')
    // 多个loader，从右到左执行
    require('style-loader!css-loader!less-loader!./increment.less')
    // 带重命名!=!，交换normalLoader和inlineLoader执行顺序
    require('aa.js!=!babel-loader!./increment.js')
    // 带!!前缀只执行inline-loader
    require('!!babel-loader!./increment.js')
    复制代码

## loader匹配条件 ##

每个模块都会筛选出它需要的loader和相应的配置：

### inline匹配 ###

// 普通
    require('babel-loader!./increment.js')
    // 带参数
    require('./myLoader?a=11&b=22!./increment.js')
    /** 
     * 指定使用全局options配置
     * {
     *    test: () => false,
     *    use: { loader: 'babel-loader', ident: 'babelLoaderOptions', options: { presets: ['@babel/preset-env'] } }
     * }
     */
    require('babel-loader??babelLoaderOptions!./increment.js')

### 全局condition条件 ###

条件 `condition` 可以是这些之一，用于匹配资源绝对路径：

rules: [
        // 字符串匹配，前缀匹配
        { test: path.resolve('./src/index.js'), use: 'babel-loader' },
        // 正则匹配
        { test: /\.js$/, use: 'babel-loader' },
        // 函数匹配，返回true表示匹配成功
        { test: (resourcePath) => { return true }, use: 'babel-loader' },
        // 数组匹配，只要一个匹配条件算匹配成功
        { test: [/\.js$/, /\.ts$/], use: 'babel-loader' },
        // 对象匹配，匹配上所有条件算匹配成功
        { test: { or: [/\.js$/, /.ts$/], exclude: /node_modules/ }, use: 'babel-loader' },
    ]

### resourceQuery ###

用于匹配路径参数，路径参数是引用资源时后面问号的内容，如 `require('./a.js?matchMe` )将能匹配下面的loader:

{
      test: /.js$/,
      resourceQuery: /matchMe$/,
      use: 'babel-loader'
    }

### oneOf ###

使用第一个成功匹配的规则：

{
      test: /.css$/,
      oneOf: [
        // 匹配require('foo.css?inline')
        { resourceQuery: /inline/,  use: 'url-loader' },
        // 匹配require('foo.css?external')
        { resourceQuery: /external/, use: 'file-loader' }
      ]
    }

### 其他 ###

*  issure: 匹配引用这个资源的模块路径，如 `foo.js` ， `bar.js` 同时引用了 `inc.js` ，可以指定只有 `foo.js` 才使用该loader。
 *  compiler: 匹配编译器名，一般没啥用。

## use配置 ##

`use` 用于指定匹配成功后需要用到哪些loader解析：

// 字符串指定
    use: 'babel-loader'
    // 数组指定: 右到左执行
    use: ['style-loader', 'css-loader']
    // 对象指定，带参数
    use: { loader: 'babel-loader', options: { presets: ['@babel/preset-env'] } }
    // 数组混合
    use: ['style-loader', { loader: 'css-loader', options: { modules: true } }, 'postcss-loader' ]

## Loader处理流程 ##

Webpack对 `loader` 的处理主要在模块构建期间，另外做了缓存和监听操作，主要有下面三个流程：

*  `RuleSet` ：初始化时解析loader相关配置；
 *  `NormalModuleFactory.create` ：根据配置匹配当前模块用到的loader，并将初始化好的 `loader` 数组通过构造函数传入；
 *  `NormalModule` ：构建模块时使用 `loader-runner` 解析loader，获取处理后的文件内容；

class NormalModuleFactory extends Tapable {
    	constructor(context, resolverFactory, options) {
            super();
            // 参数解析
    		this.ruleSet = new RuleSet(options.defaultRules.concat(options.rules));
        }
    
    	create(data, callback) {
            // 解析inline-loader/normal-loader
            resolver(data, (result) => {
                // ...使用解析好的loaders创建NormalModule
                createdModule = new NormalModule({
                    loaders: result.loaders,
                    resource: result.resource,
                });
                // 返回创建好的NormalModule
                callback(null, createdModule)
            })
        }
    }
    
    class NormalModule extends Module {
    	constructor({ loaders, resource }) {
            this.loaders = loaders
            // 文件路径
            this.resource = resource
        }
    
        // 构建module
    	doBuild(options, compilation, resolver, fs, callback) {
            // 上下文，loader里的this指向这个对象
    		const loaderContext = this.createLoaderContext(resolver, options, compilation, fs);
            // 调用loader-runner解析loader
    		runLoaders({
                resource: this.resource,
                loaders: this.loaders,
                context: loaderContext,
                readResource: fs.readFile.bind(fs)
            }, (err, result) => {
                if (result) {
                    // 缓存
                    this.buildInfo.cacheable = result.cacheable;
                    // 文件监听依赖
                    this.buildInfo.fileDependencies = new Set(result.fileDependencies);
                    // 文件夹监听依赖
                    this.buildInfo.contextDependencies = new Set(result.contextDependencies);
                }
                // 最原始的文件数据buffer
                const resourceBuffer = result.resourceBuffer;
                // loader转换后的文件内容
                const source = result.result[0];
                // 有传出sourceMap就在这里取
                const sourceMap = result.result.length >= 1 ? result.result[1] : null;
                // 其他的额外内容，如解析出的AST
                const extraInfo = result.result.length >= 2 ? result.result[2] : null;
                this._ast = extraInfo.webpackAST
                return callback();
            });
        }
    }

## RuleSet配置解析 ##

参数解析应该是这里面最繁琐的阶段，因为支持的配置多所以解析起来麻烦，基本上都是规范化配置，使最终得到统一格式，下面分别看看这里面的关键函数：

### normalizeRule ###

用于规范化单个规则，有一大半代码是在做兼容处理：

normalizeRule(rule, refs, ident) {
        const newRule = {}
        // ...
        if (rule.test || rule.include || rule.exclude) {
            // 检测同级互斥关系：(rule.test || rule.include || rule.exclude) 和 resource 只能存在一项
            checkResourceSource("test + include + exclude");
            condition = {
                test: rule.test,
                include: rule.include,
                exclude: rule.exclude
            };
            newRule.resource = RuleSet.normalizeCondition(condition);
        }
        // 和(rule.test || rule.include || rule.exclude)做的事情一样，兼容写法
        if (rule.resource) {
            checkResourceSource("resource");
            newRule.resource = RuleSet.normalizeCondition(rule.resource);
        }
    
        if (rule.use) {
            // 检测同级互斥关系： use, loaders, loader, loader + options/query 配置只能存在一项
            checkUseSource("use");
            // 规范化use配置
            newRule.use = RuleSet.normalizeUse(rule.use, ident);
        }
    
        // 将有自定义id的规则记录下来，可用于替换inline-loader的options
        if (Array.isArray(newRule.use)) {
            for (const item of newRule.use) {
                if (item.ident) {
                    refs[item.ident] = item.options;
                }
            }
        }
        return newRule;
    }

### normalizeCondition ###

用于输出匹配条件，我们在规则上配置的 `test, include, exclude, and, or not` 将在这里转换成匹配函数，用于解析某个资源时匹配是否需要这个loader：

normalizeCondition(condition) {
        // 字符条件串兼容
        if (typeof condition === "string") return str => str.indexOf(condition) === 0;
        // 函数条件串兼容
        if (typeof condition === "function") return condition;
        // 正则条件兼容
        if (condition instanceof RegExp) return condition.test.bind(condition);
        // 条件数组兼容
        if (Array.isArray(condition)) return orMatcher(condition.map(c => normalizeCondition(c)));
        // 对象条件兼容
        const matchers = [];
        Object.keys(condition).forEach(key => {
            const value = condition[key];
            switch (key) {
                case "or": case "include": case "test":
                    if (value) matchers.push(normalizeCondition(value));
                    break;
                case "and":
                    if (value) matchers.push(andMatcher(value.map(c => normalizeCondition(c))));
                    break;
                case "not": case "exclude":
                    if (value) matchers.push(notMatcher(normalizeCondition(value)));
                    break;
            }
        });
        return andMatcher(matchers);
    }
    notMatcher = matcher => str => !matcher(str);
    orMatcher = items => str => {
        for (let i = 0; i < items.length; i++) {
            if (items[i](str)) return true;
        }
        return false;
    };
    andMatcher = items => str => {
        for (let i = 0; i < items.length; i++) {
            if (!items[i](str)) return false;
        }
        return true;
    };

## inline-loader解析 ##

行内loader指直接在路径名前添加loader的情况，如 `require('!babel-loader!./increment.js')` ：

resolver(data, callback) {
        // ...
        // 将以!=!开头的资源名去除，得到带有inline-loader信息的资源路径
        // eg: 'haha!=!babel-loader!./increment.js' => 'babel-loader!./increment.js'
        requestWithoutMatchResource = handleMatchResourcde(data.request)
    
        // 分割出来所有的inline-loader
        let elements = requestWithoutMatchResource
            .replace(/^-?!+/, "")
            .replace(/!!+/g, "!")
            .split("!");
        let resource = elements.pop();
        // 分离inline-loader带的query参数
        // eg: babel-loader?a=1!./increment.js => [ { loader: 'babel-loader', options: 'a=1' } ]
        elements = elements.map(identToLoaderRequest);
    
        // 获取loader的路径
        this.resolveRequestArray(contextInfo, context, elements, loaderResolver, (err, loaders) => {
            // 如果指定了使用某个定义的options，替换为自定义选项
            // eg: babel-loader??myOptions./increment.js 将会使用配置中 rules.use.ident=myOptions 的选项
            for (const item of loaders) {
                if (typeof item.options === "string" && item.options[0] === "?") {
                    const ident = item.options.substr(1);
                    item.options = this.ruleSet.findOptionsByIdent(ident);
                    item.ident = ident;
                }
            }
        })
        // ... 解析RuleSet里的loader
    }

## 全局loader解析 ##

resolver(data, callback) {
        // ...
        // 忽略normalLoader和preLoader
        const noPreAutoLoaders = requestWithoutMatchResource.startsWith("-!");
        // 忽略normalLoader
        const noAutoLoaders = noPreAutoLoaders || requestWithoutMatchResource.startsWith("!");
        // 忽略normalLoader和preLoader和postLoader
        const noPrePostAutoLoaders = requestWithoutMatchResource.startsWith("!!");
        // RuleSet匹配loader
        const result = this.ruleSet.exec({
            resource: resource,
            realResource: resource.replace(/\?.*/, ""),
            resourceQuery,
            issuer: contextInfo.issuer,
            compiler: contextInfo.compiler
        });
        // 三种优先级loader在这里匹配
        const useLoadersPost = [];
        const useLoaders = [];
        const useLoadersPre = [];
        for (const r of result) {
            if (r.type === "use") {
                if (r.enforce === "post" && !noPrePostAutoLoaders) {
                    useLoadersPost.push(r.value);
                } else if (r.enforce === "pre" && !noPreAutoLoaders && !noPrePostAutoLoaders) {
                    useLoadersPre.push(r.value);
                } else if (!r.enforce && !noAutoLoaders && !noPrePostAutoLoaders) {
                    useLoaders.push(r.value);
                }
            }
        }
        // 解析三种loader完整路径
        const postLoaders = this.resolveRequestArray(contextInfo, this.context, useLoadersPost, loaderResolver)
        const defaultLoaders = this.resolveRequestArray(contextInfo, this.context, useLoaders, loaderResolver)
        const preLoaders = this.resolveRequestArray(contextInfo, this.context, useLoadersPre, loaderResolver)
        if (matchResource === undefined) {
            // post -> inline -> normal -> pre
            loaders = postLoaders.concat(inlineLoaders, defaultLoaders, preLoaders);
        } else {
            // post -> normal -> inline -> pre
            loaders = postLoaders.concat(defaultLoaders, inlineLoaders, preLoaders);
        }
        callback(null, {
            loaders,
            resource,
        })
    }

## RuleSet匹配loader ##

_run(data, rule, result) {
        // 由于规则已经在解析配置时转换成了函数，所以这里使用函数调用方式判断是否需要该loader
        if (rule.resource && !rule.resource(data.resource)) return false;
        if (rule.realResource && !rule.realResource(data.realResource)) return false;
        if (data.issuer && rule.issuer && !rule.issuer(data.issuer)) return false;
        if (data.resourceQuery && rule.resourceQuery && !rule.resourceQuery(data.resourceQuery)) return false;
        if (data.compiler && rule.compiler && !rule.compiler(data.compiler)) return false;
        // use的值可以是对象，数组或函数就是在这里做的兼容
        // 如果资源匹配上，加到结果集里
        if (rule.use) {
            const process = use => {
                if (typeof use === "function") {
                    process(use(data));
                } else if (Array.isArray(use)) {
                    use.forEach(process);
                } else {
                    result.push({ type: "use", value: use, enforce: rule.enforce });
                }
            };
            process(rule.use);
        }
        // 循环匹配
        if (rule.rules) {
            for (let i = 0; i < rule.rules.length; i++) {
                this._run(data, rule.rules[i], result);
            }
        }
        // 只要有一个rule匹配上就使用该loader
        if (rule.oneOf) {
            for (let i = 0; i < rule.oneOf.length; i++) {
                if (this._run(data, rule.oneOf[i], result)) break;
            }
        }
        return true;
    }

## resolveRequestArray ##

`NormalModuleFactory.resolveRequestArray` 主要处理以下功能：

*  获取loader的完整路径地址
 *  兼容处理不规范的配置写法

resolveRequestArray(contextInfo, context, array, resolver, callback) {
        // 循环所有loader配置
        asyncLib.map(array, (item, callback) => {
            // 解析loader完整路径地址
            resolver.resolve(contextInfo, context, item.loader, {}, (err, result) => {
                // 如果没找到loader是因为省略了-loader，抛出异常提示
                if (err && /^[^/]*$/.test(item.loader) && !/-loader$/.test(item.loader)) {
                    return resolver.resolve(contextInfo, context, item.loader + "-loader", {}, err2 => {
                        if (!err2) {
                            err.message = err.message + "loader不支持省略 '-loader' 后缀 \n" +
                                `You need to specify '${item.loader}-loader' instead of '${item.loader}',\n`
                        }
                        callback(err);
                    });
                }
                if (err) return callback(err);
                // 格式化并输出结果
                const optionsOnly = item.options ? { options: item.options } : undefined;
                callback(null, Object.assign({}, item, identToLoaderRequest(result), optionsOnly))
            });
        }, callback)
    }

## 输出结果 ##

### result\[source, sourceMap, extraInfo\] ###

*  source: 是经过loader处理后的内容；
 *  sourceMap: 如果有sourceMap，可以在这里获取；
 *  extraInfo: 这里放额外的输出内容，比如AST等；

### resourceBuffer ###

这是最原始文件的资源，没有经过loader

### fileDependencies / contextDependencies ###

如果文件需要 `foo-loader` 处理，那么 `foo-loader` 会默认将该文件添加到自己的依赖上，开启文件监听后如果文件改变，那么会重新执行 `foo-loader` 。

默认情况下loader只会添加匹配到的文件作为依赖，如果在loader执行过程中，需要用到其他文件如 `data.txt` ，且更新后要重新输出结果，那么可以使用 `this.addDependency` 来将其添加为依赖项，这样 `data.txt` 更新后会重新执行loader输出。

### cacheable ###

如果一个loader的输入和相关依赖没变化时输出结果不变，那么这个loader应该设置为可以缓存，在解析完所有loader后，会将结果缓存下来。

在监听文件情况下如果输出结果没变，文件不会重新输出。

默认情况下loader会开启缓存，在loader中可以使用 `this.cacheable(false)` 关闭缓存。