webpack自己手动实现一个plugin来进行优化项目打包体积

为了手动实现一个 Webpack 插件来优化项目的打包体积，你需要理解 Webpack 插件的基本结构和工作原理。Webpack 插件是通过编写自定义的 JavaScript 代码来扩展 Webpack 构建流程。通过插件，你可以访问 Webpack 的各个生命周期钩子，进而实现你所需的功能，例如：分析依赖、删除不必要的代码、压缩资源等。

下面是实现一个 Webpack 插件来优化项目打包体积的基本步骤和示例。

1. 创建 Webpack 插件的基础架构

首先，创建一个简单的 Webpack 插件的基础代码框架。Webpack 插件是一个 JavaScript 类，它的 apply 方法会被 Webpack 调用，接受一个 compiler 对象作为参数。你可以在这个方法中访问 Webpack 的生命周期钩子。

js
复制代码
class OptimizeBundleSizePlugin {
  constructor(options) {
    this.options = options;
  }

  apply(compiler) {
    // 监听 webpack 的 done 钩子
    compiler.hooks.emit.tapAsync('OptimizeBundleSizePlugin', (compilation, callback) => {
      // 插件的核心逻辑
      console.log('Starting bundle size optimization...');

      // 访问打包生成的资源
      for (const filename in compilation.assets) {
        if (this.options && this.options.test && !this.options.test.test(filename)) {
          continue;  // 如果提供了 test 选项，则过滤文件名
        }

        let originalSize = compilation.assets[filename].size();
        let optimizedContent = this.optimizeAsset(compilation.assets[filename].source());
        let optimizedSize = Buffer.byteLength(optimizedContent, 'utf8');

        // 替换原有的资源
        compilation.assets[filename] = {
          source: () => optimizedContent,
          size: () => optimizedSize
        };

        console.log(`${filename}: ${originalSize} bytes -> ${optimizedSize} bytes`);
      }

      callback();
    });
  }

  optimizeAsset(source) {
    // 在这里实现你的优化逻辑，简单示例是删除注释和空白符
    return source
      .replace(//*[\s\S]*?*//g, '')  // 删除块级注释
      .replace(///[^\n\r]*/g, '')       // 删除行内注释
      .replace(/\s{2,}/g, ' ')            // 多余的空格替换为单空格
      .trim();                            // 删除首尾空白符
  }
}

module.exports = OptimizeBundleSizePlugin;