面试题：Webpack自定义加载器性能优化之多线程与异步处理

实现思路

利用Node.js的多线程特性：Node.js自身是单线程的，但可以通过worker_threads模块创建多个工作线程来实现多线程处理。每个工作线程可以独立处理一部分数据，从而提高整体处理速度。
异步处理：Webpack加载器本身就是异步的，可以利用async/await语法来处理异步操作。在处理大量数据时，将数据分块处理，每个块的处理可以是异步的。
结合Webpack加载器原理：Webpack加载器是链式调用的，每个加载器接收上一个加载器的输出作为输入，并返回处理后的结果。在自定义加载器中，可以在开始处理数据前，将数据分割成多个部分，利用多线程或异步方式处理这些部分，最后合并结果返回。

核心代码框架

使用worker_threads实现多线程：

const { Worker, isMainThread, parentPort } = require('worker_threads');
const path = require('path');

// 工作线程处理函数
function workerHandler(dataChunk) {
    // 模拟数据处理
    return dataChunk.map(item => item.toUpperCase());
}

// 主加载器代码
module.exports = async function (source) {
    const dataChunks = [];
    const numThreads = 4; // 设置线程数
    const chunkSize = Math.ceil(source.length / numThreads);

    // 分割数据
    for (let i = 0; i < numThreads; i++) {
        const start = i * chunkSize;
        const end = (i === numThreads - 1)? source.length : (i + 1) * chunkSize;
        dataChunks.push(source.slice(start, end));
    }

    const workers = [];
    const results = [];

    // 创建工作线程并启动
    for (let i = 0; i < numThreads; i++) {
        const worker = new Worker(path.join(__dirname, 'worker.js'), {
            workerData: dataChunks[i]
        });
        workers.push(worker);

        worker.on('message', (result) => {
            results.push(result);
        });

        worker.on('error', (error) => {
            console.error(`Worker ${i} error:`, error);
        });

        worker.on('exit', (code) => {
            if (code!== 0) {
                console.error(`Worker ${i} exited with code ${code}`);
            }
        });
    }

    // 等待所有工作线程完成
    await Promise.all(workers.map(worker => new Promise((resolve, reject) => {
        worker.on('message', resolve);
        worker.on('error', reject);
        worker.on('exit', (code) => {
            if (code!== 0) {
                reject(new Error(`Worker exited with code ${code}`));
            } else {
                resolve();
            }
        });
    })));

    // 合并结果
    const mergedResult = results.flat();
    return mergedResult.join('');
};

// worker.js代码
if (!isMainThread) {
    const { workerData } = require('worker_threads');
    const result = workerHandler(workerData);
    parentPort.postMessage(result);
}

使用异步分块处理（不使用多线程）：

// 异步处理函数
async function asyncHandler(dataChunk) {
    return new Promise((resolve) => {
        setTimeout(() => {
            const result = dataChunk.map(item => item.toUpperCase());
            resolve(result);
        }, 100); // 模拟异步操作
    });
}

module.exports = async function (source) {
    const dataChunks = [];
    const numChunks = 4; // 设置分块数
    const chunkSize = Math.ceil(source.length / numChunks);

    // 分割数据
    for (let i = 0; i < numChunks; i++) {
        const start = i * chunkSize;
        const end = (i === numChunks - 1)? source.length : (i + 1) * chunkSize;
        dataChunks.push(source.slice(start, end));
    }

    const results = await Promise.all(dataChunks.map(asyncHandler));
    const mergedResult = results.flat();
    return mergedResult.join('');
};

面试题：Webpack自定义加载器性能优化之多线程与异步处理

知识考点

面试题答案

实现思路

核心代码框架