面试题：Webpack自定义加载器在多模块多环境下的优化与适配

架构设计

基础结构： Webpack 自定义加载器本质上是一个函数，接受源文件内容作为参数，返回处理后的内容。因此，首先要定义一个基本的函数结构，用于接收和处理模块代码。

module.exports = function (source) {
    // 处理源文件内容
    return processedSource;
};

插件化设计：考虑到项目的复杂性和扩展性，采用插件化的方式设计加载器。将不同功能拆分为独立的插件，每个插件负责特定的处理逻辑，如环境检测、代码转换、性能优化等。这样在不同环境或模块需求变化时，可以方便地添加、移除或修改插件。

class LoaderPlugin {
    apply(loader) {
        // 插件逻辑
    }
}

class EnvironmentPlugin extends LoaderPlugin {
    apply(loader) {
        // 环境检测逻辑
    }
}

class PerformancePlugin extends LoaderPlugin {
    apply(loader) {
        // 性能优化逻辑
    }
}

class Loader {
    constructor() {
        this.plugins = [];
    }

    use(plugin) {
        this.plugins.push(plugin);
    }

    run(source) {
        let processedSource = source;
        this.plugins.forEach(plugin => {
            plugin.apply(this);
            // 根据插件逻辑处理 processedSource
        });
        return processedSource;
    }
}

const loader = new Loader();
loader.use(new EnvironmentPlugin());
loader.use(new PerformancePlugin());

module.exports = function (source) {
    return loader.run(source);
};

检测和适配不同环境

环境变量检测：在加载器中，通过检测环境变量来判断当前运行环境。在 Node.js 环境中，可以使用 process.env 对象；在浏览器环境中，可以通过 Webpack 的 DefinePlugin 来注入环境变量。

class EnvironmentPlugin extends LoaderPlugin {
    apply(loader) {
        let isNode = typeof process!== 'undefined' && process.versions && process.versions.node;
        let isBrowser = typeof window!== 'undefined';
        if (isNode) {
            // 处理 Node.js 环境相关逻辑
        } else if (isBrowser) {
            // 处理浏览器环境相关逻辑
        }
    }
}

条件编译：对于不同环境下的代码差异，采用条件编译的方式。例如，在代码中使用特定的注释标记，加载器根据环境变量对这些标记进行处理，移除或保留相应的代码块。

// 源文件代码
/* istanbul ignore next */
if (process.env.NODE_ENV === 'browser') {
    // 浏览器特定代码
}
/* istanbul ignore next */
if (process.env.NODE_ENV === 'node') {
    // Node.js 特定代码
}

加载器中处理条件编译代码的逻辑：

class EnvironmentPlugin extends LoaderPlugin {
    apply(loader) {
        let isNode = typeof process!== 'undefined' && process.versions && process.versions.node;
        let isBrowser = typeof window!== 'undefined';
        let processedSource = loader.source;
        if (isNode) {
            processedSource = processedSource.replace(/\/\* istanbul ignore next \*\/[\s\S]*?if \(process\.env\.NODE_ENV === 'browser'\)[\s\S]*?}/g, '');
        } else if (isBrowser) {
            processedSource = processedSource.replace(/\/\* istanbul ignore next \*\/[\s\S]*?if \(process\.env\.NODE_ENV === 'node'\)[\s\S]*?}/g, '');
        }
        loader.source = processedSource;
    }
}

性能优化策略

浏览器环境性能优化：
- 代码压缩：使用 TerserPlugin 对输出的代码进行压缩，去除冗余代码、缩短变量名等，减小文件体积，提高加载速度。
- 懒加载：对于大型前端应用，采用懒加载策略。通过 Webpack 的动态导入语法（import()）实现模块的按需加载，避免一次性加载过多代码，提高首屏加载速度。
- 缓存：合理设置缓存策略，对于不经常变化的静态资源，设置较长的缓存时间。在 Webpack 中，可以通过 Hash 命名方式为静态资源生成唯一的文件名，当文件内容变化时，文件名也会改变，从而避免浏览器使用旧的缓存。
Node.js 环境性能优化：
- 优化内存使用：在 Node.js 环境中，要注意内存的使用。避免内存泄漏，及时释放不再使用的资源。例如，在处理大型文件时，采用流的方式进行读取和处理，而不是一次性将整个文件读入内存。
- 多进程处理：对于一些计算密集型的任务，可以使用 Node.js 的多进程模块（如 cluster）来利用多核 CPU 的优势，提高处理性能。
- 缓存中间结果：在 Node.js 中，可以使用内存缓存（如 node-cache）来缓存一些计算结果或频繁读取的数据，减少重复计算和 I/O 操作，提高性能。

星途面试题库

面试题：Webpack自定义加载器在多模块多环境下的优化与适配

知识考点

面试题答案

架构设计

检测和适配不同环境

性能优化策略