面试题：Webpack CLI 脚手架自定义插件及性能瓶颈分析

1. 设计并实现自定义 Webpack 插件

class PerformanceAnalyzerPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        const { performance } = this.options;
        const startTime = Date.now();
        compiler.hooks.done.tap('PerformanceAnalyzerPlugin', stats => {
            const endTime = Date.now();
            const buildTime = endTime - startTime;
            console.log(`Total build time: ${buildTime} ms`);

            const assets = stats.toJson().assets;
            if (performance && performance.maxAssetSize) {
                assets.forEach(asset => {
                    if (asset.size > performance.maxAssetSize) {
                        console.log(`Asset ${asset.name} exceeds the maximum size limit of ${performance.maxAssetSize} bytes.`);
                    }
                });
            }

            if (performance && performance.maxEntrypointSize) {
                const entrypoints = stats.toJson().entrypoints;
                Object.keys(entrypoints).forEach(entrypointName => {
                    const entrypoint = entrypoints[entrypointName];
                    if (entrypoint.size > performance.maxEntrypointSize) {
                        console.log(`Entrypoint ${entrypointName} exceeds the maximum size limit of ${performance.maxEntrypointSize} bytes.`);
                    }
                });
            }
        });
    }
}
module.exports = PerformanceAnalyzerPlugin;

2. 使用插件

在 Webpack 配置文件中引入插件：

const PerformanceAnalyzerPlugin = require('./PerformanceAnalyzerPlugin');
module.exports = {
    //...其他配置
    plugins: [
        new PerformanceAnalyzerPlugin({
            performance: {
                maxAssetSize: 100000, // 100KB
                maxEntrypointSize: 200000 // 200KB
            }
        })
    ]
};

3. 编写自定义插件的关键要点

钩子的选择：需要深入了解 Webpack 的各种钩子（hooks），根据需求选择合适的钩子进行挂载。例如，compiler.hooks.done 适用于在构建完成后进行分析。
参数处理：要正确处理传入插件的参数，在 constructor 中接收并保存参数，以便在插件逻辑中使用。
作用域和上下文：确保插件中的代码在正确的作用域和上下文中执行，特别是在使用 Webpack 提供的各种对象和方法时。

4. Webpack 插件机制的原理

Webpack 插件机制基于发布 - 订阅模式（观察者模式）。Webpack 运行过程中会广播一系列的事件（钩子），插件通过 apply 方法将自身注册到对应的钩子上。当 Webpack 执行到某个阶段，触发相应的钩子时，注册在该钩子上的插件函数就会被执行。插件可以通过这些钩子在 Webpack 构建的不同阶段介入，修改构建过程中的各种数据，如 compilation 对象（包含了所有模块和它们的依赖关系），从而实现诸如压缩代码、分析性能等各种功能。

星途面试题库

面试题：Webpack CLI 脚手架自定义插件及性能瓶颈分析

知识考点

面试题答案

1. 设计并实现自定义 Webpack 插件

2. 使用插件

3. 编写自定义插件的关键要点

4. Webpack 插件机制的原理