前端工程化与性能优化指南

前端工程化与性能优化指南

一、Webpack 核心配置与原理

1.1 Webpack 基础配置手写

1.1.1 最小化 Webpack 配置

// webpack.config.js
// 1. 引入 Node.js 路径处理模块，用于处理文件路径
const path = require('path');

module.exports = {
  // 2. mode 指定构建模式
  //    - 'development'：开发模式，代码不压缩，生成 sourcemap
  //    - 'production'：生产模式，代码压缩，启用 tree-shaking
  mode: 'development',

  // 3. entry 指定入口文件
  //    Webpack 从这里开始递归解析所有模块，构建依赖图
  entry: './src/index.js',

  // 4. output 指定输出配置
  output: {
    // 5. filename 输出文件名
    //    [name] 是入口名称，[hash] 是本次构建的 hash 值
    //    hash 用于解决缓存问题：当文件内容变化时，hash 变化，浏览器重新请求
    filename: '[name].[hash].js',

    // 6. path 输出目录（必须是绝对路径）
    //    __dirname 是 Node.js 全局变量，表示当前文件所在目录的绝对路径
    path: path.resolve(__dirname, 'dist'),

    // 7. clean：构建前清理输出目录
    //    避免残留旧文件导致混乱
    clean: true
  }
};

---

1.1.2 完整开发环境配置

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');

module.exports = {
  // 1. 入口配置
  entry: {
    // 入口名称：入口路径
    // 可以有多个入口，实现多页面应用
    main: './src/main.js',
    // 另一个入口，用于第三方库单独打包
    vendors: './src/vendors.js'
  },

  // 2. 输出配置
  output: {
    // [name] = 入口名称，保留多个入口时文件名不冲突
    // [hash:8] 取 hash 的前8位，平衡缓存和文件名长度
    filename: '[name].[hash:8].js',

    // 3. 输出目录（绝对路径）
    path: path.resolve(__dirname, 'dist'),

    // 4. 公开路径：生成的文件引用的基础路径
    //    适用于 CDN 部署或子目录部署
    publicPath: '/',

    // 5. 是否使用哈希命名（可用于缓存）
    //    实际项目中可用 contenthash 替代 hash
    hashDigestLength: 8,

    // 6. 资源模块的公开 URL 前缀
    //    用于 css、图片等资源在 HTML 中的路径
    assetModuleFilename: 'assets/[hash][ext][query]',

    // 7. 清理输出目录
    clean: true
  },

  // 8. 加载器配置（处理非 JS 文件）
  //    加载器从右到左执行（最后的先执行）
  module: {
    rules: [
      // 8.1 处理 JavaScript 文件
      {
        test: /\.js$/,
        // exclude 排除不需要处理的文件
        // 提升构建速度
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            // Babel 配置文件路径
            configFile: path.resolve(__dirname, '.babelrc'),
            // 开启缓存：编译过的文件缓存起来，加快下次构建
            cacheDirectory: true
          }
        }
      },

      // 8.2 处理 CSS 文件
      {
        test: /\.css$/,
        // use 数组从右到左执行：
        // 1. css-loader：将 CSS 转为 JS 模块（处理 @import、url() 等）
        // 2. style-loader：将 CSS 注入到 DOM 的 <style> 标签中
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              // 开启 CSS 模块化（针对 .module.css 文件）
              modules: {
                // 自定义生成的类名格式
                localIdentName: '[name]__[local]--[hash:base64:5]'
              }
            }
          }
        ]
      },

      // 8.3 处理 SCSS 文件
      {
        test: /\.scss$/,
        // 从右到左：sass-loader -> css-loader -> style-loader
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' },
          {
            loader: 'sass-loader',
            options: {
              // 指定 sass 实现（dart-sass/node-sass）
              // 推荐 dart-sass，性能更好
              implementation: require('sass')
            }
          }
        ]
      },

      // 8.4 处理图片文件
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/i,
        // asset/resource 将图片输出到输出目录
        // 适合大图，打包进 bundle 会导致体积过大
        type: 'asset/resource',
        // 自定义输出路径和文件名
        generator: {
          filename: 'images/[hash][ext][query]'
        }
      },

      // 8.5 处理字体文件
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[hash][ext][query]'
        }
      },

      // 8.6 处理 Vue 单文件组件
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },

  // 9. 插件配置
  plugins: [
    // 9.1 生成 HTML 文件
    //    自动注入 entry 生成的 JS 文件
    new HtmlWebpackPlugin({
      // 模板文件路径
      template: './public/index.html',
      // 输出文件名
      filename: 'index.html',
      // 是否注入 chunk（JS 文件）
      inject: true,
      // 是否压缩 HTML
      minify: {
        removeComments: true,    // 删除注释
        collapseWhitespace: true, // 折叠空白
        removeAttributeQuotes: true // 删除属性引号
      }
    }),

    // 9.2 Vue Loader 插件（必须）
    new VueLoaderPlugin(),

    // 9.3 DefinePlugin：定义全局常量
    //    替换源代码中的 process.env.NODE_ENV
    new webpack.DefinePlugin({
      // 注意：值必须是字符串，会被直接替换
      // 'development' 会替换为字符串 'development'
      // 而 NODE_ENV 会替换为实际的字符串
      'process.env.NODE_ENV': JSON.stringify('development'),
      'process.env.VUE_APP_BASE_API': JSON.stringify('/api')
    }),

    // 9.4 ProvidePlugin：自动加载模块
    //    当模块未找到时，自动注入指定模块
    //    不需要手动 import $ 或 import Vue
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Vue: ['vue/dist/vue.esm.js', 'default']
    })
  ],

  // 10. 解析配置
  resolve: {
    // 10.1 文件扩展名：自动补全后缀
    //    导入时不用写 .js / .vue 等后缀
    extensions: ['.js', '.vue', '.json', '.css'],

    // 10.2 路径别名：简化导入路径
    alias: {
      // '@' 通常指向 src 目录
      '@': path.resolve(__dirname, 'src'),
      // 统一第三方库的路径，方便替换
      'vue$': 'vue/dist/vue.esm.js',
      // 组件路径别名
      'components': path.resolve(__dirname, 'src/components'),
      'utils': path.resolve(__dirname, 'src/utils')
    },

    // 10.3 解析模块的目录
    //    减少解析路径，提升构建速度
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules'
    ],

    // 10.4 主文件字段
    //    用于 package.json 的 exports 字段
    mainFields: ['browser', 'module', 'main']
  },

  // 11. 开发服务器配置
  devServer: {
    // 11.1 静态文件目录
    static: {
      directory: path.join(__dirname, 'public')
    },

    // 11.2 端口号
    port: 8080,

    // 11.3 自动打开浏览器
    open: true,

    // 11.4 开启热更新（HMR）
    //    修改代码后浏览器自动刷新，只更新变化的部分
    hot: true,

    // 11.5 代理配置（解决跨域）
    proxy: {
      '/api': {
        // 代理目标服务器
        target: 'http://localhost:3000',
        // 是否改变 Origin（开发环境设为 true）
        changeOrigin: true,
        // 重写路径（去掉 /api 前缀）
        pathRewrite: { '^/api': '' }
      }
    },

    // 11.6 .historyApiFallback
    //    SPA 使用 HTML5 History API 时，404 请求回退到 index.html
    historyApiFallback: true,

    // 11.7 压缩
    compress: true
  },

  // 12. 优化配置
  optimization: {
    // 12.1 代码分割
    splitChunks: {
      chunks: 'all',
      // 分割的最小块大小（字节）
      minSize: 20000,
      // 最大请求数（限制并行下载数量）
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      cacheGroups: {
        // 第三方库单独打包
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: -10 // 优先级，数字越大越先处理
        },
        // 公共模块打包
        common: {
          minChunks: 2,
          name: 'common',
          chunks: 'all',
          priority: -20
        }
      }
    },

    // 12.2 runtime 代码单独打包
    //    使 chunk 缓存更有效
    runtimeChunk: 'single',

    // 12.3 模块标识符优化
    //    改变时只影响该模块，不影响其他模块的 hash
    moduleIds: 'deterministic',

    // 12.4 生产环境 tree-shaking
    usedExports: true,
    // 合并合并模块
    concatenateModules: true
  },

  // 13. 构建目标
  target: 'web',

  // 14. Source Map 配置
  //    开发环境用 cheap-module-source-map（快）
  //    生产环境用 hidden-source-map 或 false（安全）
  devtool: 'cheap-module-source-map',

  // 15. 统计信息输出
  stats: 'errors-warnings',

  // 16. 外部扩展
  //    运行时从 CDN 加载，不打包进 bundle
  externals: {
    vue: 'Vue',
    react: 'React'
  }
};

---

1.2 Webpack 高级配置

1.2.1 生产环境优化配置

// webpack.prod.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const PrerenderSPAPlugin = require('prerender-webpack-plugin');

module.exports = (env, argv) => {
  // 1. 根据 mode 确定是否为生产环境
  const isProduction = argv.mode === 'production';

  return {
    // 2. 生产模式自动优化，但我们可以进一步控制
    mode: isProduction ? 'production' : 'development',

    // 3. 生产环境 source map 设为 false（安全）
    //    或者用 nosources-source-map（只有错误位置，没有源码）
    devtool: isProduction ? false : 'eval-source-map',

    // 4. 入口
    entry: {
      app: './src/main.js'
    },

    output: {
      // 5. 生产环境用 contenthash，实现长期缓存
      //    只有内容变化时 hash 才变化
      filename: isProduction
        ? 'js/[name].[contenthash:8].js'
        : 'js/[name].js',

      path: path.resolve(__dirname, 'dist'),

      // 6. 所有资源的基础路径（CDN 部署时需要）
      publicPath: 'https://cdn.example.com/',

      // 7. 不生成 Source Map 文件（安全）
      sourceMapFilename: '[file].map',

      clean: true
    },

    module: {
      rules: [
        // 8. CSS 处理：开发环境用 style-loader，生产环境提取为独立文件
        {
          test: /\.css$/,
          use: [
            // 开发环境：CSS 注入到 <style> 标签
            // 生产环境：MiniCssExtractPlugin 提取到 .css 文件
            isProduction
              ? MiniCssExtractPlugin.loader
              : { loader: 'style-loader' },
            { loader: 'css-loader' }
          ]
        },

        // 9. 图片资源优化
        {
          test: /\.(png|jpg|jpeg|gif|svg)$/i,
          type: 'asset',
          parser: {
            // 10. 数据URI策略：小图转 base64（减少请求）
            dataUrlCondition: {
              // 小于 8KB 的图片转为 base64，减少 HTTP 请求
              maxSize: 8 * 1024
            }
          },
          generator: {
            filename: 'images/[name].[hash:8][ext]'
          }
        }
      ]
    },

    plugins: [
      // 11. HTML 模板
      new HtmlWebpackPlugin({
        template: './public/index.html',
        // 12. 压缩 HTML
        minify: isProduction ? {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true,
          removeRedundantAttributes: true,
          useShortDoctype: true,
          removeEmptyAttributes: true,
          removeStyleLinkTypeAttributes: true,
          keepClosingSlash: true,
          minifyJS: true,
          minifyCSS: true,
          minifyURLs: true
        } : false
      }),

      // 13. 提取 CSS 为独立文件（生产环境）
      new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash:8].css',
        chunkFilename: 'css/[name].[contenthash:8].chunk.css'
      }),

      // 14. 清理输出目录
      new CleanWebpackPlugin(),

      // 15. 预渲染 SPA（可选，优化首屏渲染）
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/about', '/contact'],
        minify: {
          collapseWhitespace: true,
          removeComments: true
        }
      })
    ],

    optimization: {
      // 16. 最小化器配置
      minimizer: [
        // 16.1 JS 压缩（Terser）
        new TerserPlugin({
          terserOptions: {
            parse: {
              // 开启 ESTree 解析（更精确）
              ecma: 2020
            },
            compress: {
              // 删除 console.log（上线后不需要）
              drop_console: true,
              // 删除 debugger
              drop_debugger: true,
              // 移除未使用的代码
              dead_code: true,
              // 优化布尔运算
              booleans: true,
              // 优化 if 语句
              conditionals: true,
              // 移除 unused 代码
              unused: true
            },
            mangle: {
              // 生产环境擦除变量名（压缩）
              safari10: true
            },
            output: {
              // 保持注释（许可证声明）
              comments: /@license/i
            }
          },
          extractComments: false, // 不生成 LICENSE 文件
          parallel: true           // 开启多进程压缩
        }),

        // 16.2 CSS 压缩（CssMinimizerPlugin）
        new CssMinimizerPlugin({
          minimizerOptions: {
            preset: [
              'default',
              {
                discardComments: { removeAll: true }
              }
            ]
          }
        })
      ],

      // 17. 代码分割
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: 5,
        cacheGroups: {
          // 第三方库
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendors',
            chunks: 'all',
            priority: 10
          },
          // 公共组件
          common: {
            minChunks: 2,
            name: 'common',
            chunks: 'all',
            priority: 5
          },
          // 高频库单独打包（可能长期缓存）
          vue: {
            test: /[\\/]node_modules[\\/](vue|vue-router|vuex)[\\/]/,
            name: 'vue-vendor',
            chunks: 'all',
            priority: 20
          }
        }
      },

      // 18. runtime 单独打包
      runtimeChunk: 'single',

      // 19. 生成模块映射（便于调试）
      moduleIds: 'deterministic',

      // 20. 启用 tree-shaking
      usedExports: true,
      // 21. 尽力压缩
      concatenateModules: true
    },

    // 22. 性能提示
    performance: {
      hints: isProduction ? 'warning' : false,
      // 超过 500KB 给出警告
      maxEntrypointSize: 512000,
      maxAssetSize: 512000
    }
  };
};

---

1.2.2 Webpack 插件手写

// 1. 自定义 Webpack 插件基本结构
class CustomPlugin {
  // 1.1 插件构造函数
  //    compiler 是 webpack 实例，包含所有配置和状态
  constructor(options = {}) {
    // 保存插件配置
    this.options = options;
    // 插件名（用于日志和调试）
    this.pluginName = 'CustomPlugin';
  }

  // 1.2 apply 是插件的主入口
  //    Webpack 会在构建过程中调用此方法
  apply(compiler) {
    // 2. 监听 Webpack 生命周期钩子

    // 2.1 compilation：每次编译开始时调用
    //    compilation 是本次编译的实例，包含模块和 chunk 信息
    compiler.hooks.compilation.tap(this.pluginName, (compilation) => {
      // 3. 监听 compilation 的特定钩子
      //    这里监听优化资源的过程
      compilation.hooks.processAssets.tapAsync(
        {
          name: this.pluginName,
          // 资源处理阶段：在优化和生成资源之后
          stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL
        },
        (assets, callback) => {
          // assets 是本次编译生成的所有资源
          // 可以在这里修改、添加或删除资源

          for (const [filename, asset] of Object.entries(assets)) {
            console.log(`Generated asset: ${filename}`);
            console.log(`Size: ${asset.size()} bytes`);
          }

          // 处理完成后调用 callback
          callback();
        }
      );
    });

    // 2.2 emit：资源生成到输出目录之前调用
    //    可以在这里修改输出文件的内容
    compiler.hooks.emit.tapAsync(this.pluginName, (compilation, callback) => {
      // compilation.assets 包含所有要输出的资源
      const stats = compilation.getStats();
      const assets = Object.keys(compilation.assets);

      console.log(`Total assets: ${assets.length}`);

      // 2.3 添加新的资源文件
      //    可以生成额外的文件，如分析报告
      const manifest = {
        buildTime: new Date().toISOString(),
        assets: assets.map(name => ({
          name,
          size: compilation.assets[name].size()
        }))
      };

      // 添加一个 JSON 文件到输出
      compilation.assets['manifest.json'] = {
        source: () => JSON.stringify(manifest, null, 2),
        size: () => JSON.stringify(manifest).length
      };

      callback();
    });

    // 2.4 afterEmit：资源输出完成后调用
    //    适合做清理工作或发送通知
    compiler.hooks.afterEmit.tapAsync(this.pluginName, (compilation, callback) => {
      console.log('Build completed and files emitted');
      callback();
    });

    // 2.5 done：编译完成后调用
    //    不管成功还是失败都会调用
    compiler.hooks.done.tapAsync(this.pluginName, (stats, callback) => {
      const buildInfo = stats.toJson();
      console.log('Build done:', {
        time: buildInfo.time,
        assets: buildInfo.assets.length,
        warnings: buildInfo.warnings.length,
        errors: buildInfo.errors.length
      });
      callback();
    });
  }
}

// 使用自定义插件
module.exports = {
  plugins: [
    new CustomPlugin({
      // 插件配置
      verbose: true
    })
  ]
};

---

1.2.3 Webpack Loader 手写

// 2. 自定义 Webpack Loader 基本结构

// 2.1 同步 Loader
//    简单场景，返回处理后的 source
function simpleLoader(source) {
  // source 是原始文件内容

  // 转换 source
  const transformed = source.replace(/旧文本/g, '新文本');

  // 返回处理后的内容
  // 可以返回 this.callback(err, result) 传递更多信息
  return transformed;
}

// 2.2 完整 Loader（带上下文信息）
function fullLoader(source, inputSourceMap) {
  // 1. 获取 loader 配置
  const options = this.getOptions();
  const callback = this.async();

  // 2. this.callback 用于异步处理
  //    第一个参数是错误，第二个是处理后的源码，第三个是 source map
  callback(null, transformedSource, sourceMap);

  // 或者报告错误
  // callback(new Error('处理失败'), null);
}

// 2.3 使用 loader-utils 解析选项
const { getOptions } = require('loader-utils');
const { validate } = require('schema-utils');

const schema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    age: { type: 'number' }
  },
  additionalProperties: false
};

function loader(source) {
  const options = getOptions(this);

  // 验证选项
  validate(schema, options, {
    name: 'MyLoader',
    baseDataPath: 'options'
  });

  // 转换 source
  let transformed = source;

  // 根据配置处理
  if (options.name) {
    transformed = transformed.replace(/PROJECT_NAME/g, options.name);
  }

  // 返回（同步）
  return transformed;
}

// 2.4 完整 Loader 示例：markdown 转 HTML
const marked = require('marked');

function markdownLoader(source) {
  // 1. 获取配置
  const options = this.getOptions();

  // 2. 解析 markdown
  const html = marked(source, {
    // marked 配置
    gfm: true,
    breaks: options.breaks || false
  });

  // 3. 包装成 HTML 模块
  //    导出字符串，供其他模块引用
  const result = `
    const html = ${JSON.stringify(html)};
    export default html;
  `;

  // 4. 如果需要 source map
  //    返回数组 [result, sourceMap]
  return result;
}

// 2.5 Pitch Loader
//    在 Loader 主函数之前执行，可以决定是否跳过主函数
function pitchLoader(remainingRequest, precedingRequest, data) {
  // 1. remainingRequest：剩余的 loader 路径
  // 2. precedingRequest：已经执行过的 loader 路径
  // 3. data：可以在 loader 间传递数据

  // 如果返回非 undefined，会跳过所有后续 loader
  // 常用于条件加载
  if (someCondition) {
    return '';
  }
}

// 2.6 导出 Loader
module.exports = markdownLoader;
module.exports.pitch = pitchLoader;

---

1.3 Webpack 核心原理

1.3.1 Tapable 插件系统原理

// Tapable 是 Webpack 的核心插件系统
const { SyncHook, SyncBailHook, SyncWaterfallHook, SyncLoopHook } = require('tapable');
const { AsyncParallelHook, AsyncSeriesHook } = require('tapable');

// 1. SyncHook：同步钩子，回调依次执行，不关心返回值
class MyPlugin {
  constructor() {
    // 1.1 创建钩子，定义参数
    this.hooks = {
      // 1.2 定义一个同步钩子，接受 (name, age) 两个参数
      greet: new SyncHook(['name', 'age'])
    };
  }

  // 1.3 注册事件（tap）
  register() {
    this.hooks.greet.tap('Plugin1', (name, age) => {
      console.log('Plugin1:', name, age);
    });

    this.hooks.greet.tap('Plugin2', (name, age) => {
      console.log('Plugin2:', name, age);
    });
  }

  // 1.4 触发事件（call）
  call(name, age) {
    this.hooks.greet.call(name, age);
    // 输出：
    // Plugin1: Alice 25
    // Plugin2: Alice 25
  }
}

// 2. SyncBailHook：同步钩子，回调依次执行
//    如果某个回调返回非 undefined，后续回调不再执行
class MyBailPlugin {
  constructor() {
    this.hooks = {
      // 2.1 bail 钩子
      find: new SyncBailHook(['data'])
    };
  }

  register() {
    this.hooks.find.tap('CachePlugin', (data) => {
      if (data.cache) {
        return data.cache; // 返回值，后续不执行
      }
    });

    this.hooks.find.tap('FetchPlugin', (data) => {
      return fetchFromNetwork(data); // 一旦执行，后续不执行
    });
  }

  call(data) {
    const result = this.hooks.find.call(data);
    console.log('Result:', result);
  }
}

// 3. SyncWaterfallHook：同步钩子，依次传递结果
//    前一个回调的返回值传给下一个回调
class MyWaterfallPlugin {
  constructor() {
    this.hooks = {
      process: new SyncWaterfallHook(['initial'])
    };
  }

  register() {
    this.hooks.process.tap('Step1', (initial) => {
      return initial + ' -> Step1';
    });

    this.hooks.process.tap('Step2', (preResult) => {
      return preResult + ' -> Step2';
    });

    this.hooks.process.tap('Step3', (preResult) => {
      return preResult + ' -> Step3';
    });
  }

  call() {
    const result = this.hooks.process.call('Start');
    // 结果: 'Start -> Step1 -> Step2 -> Step3'
  }
}

// 4. AsyncSeriesHook：异步串行钩子
//    依次执行异步回调，每个完成后执行下一个
class MyAsyncPlugin {
  constructor() {
    this.hooks = {
      load: new AsyncSeriesHook(['resource'])
    };
  }

  register() {
    this.hooks.load.tapAsync('FileLoader', (resource, callback) => {
      fs.readFile(resource, (err, data) => {
        if (err) return callback(err);
        console.log('File loaded');
        callback(); // 必须调用 callback
      });
    });

    this.hooks.load.tapAsync('CacheLoader', (resource, callback) => {
      checkCache(resource, (err, cached) => {
        if (err) return callback(err);
        console.log('Cache checked');
        callback();
      });
    });
  }

  call(resource) {
    this.hooks.load.callAsync(resource, (err) => {
      if (err) console.error('Error:', err);
      else console.log('All done');
    });
  }
}

// 5. AsyncParallelHook：异步并行钩子
//    所有异步回调同时执行，全部完成后执行最终回调
class MyParallelPlugin {
  constructor() {
    this.hooks = {
      parallel: new AsyncParallelHook(['data'])
    };
  }

  register() {
    this.hooks.parallel.tapAsync('Task1', (data, callback) => {
      setTimeout(() => {
        console.log('Task1 done');
        callback(null, 'result1');
      }, 100);
    });

    this.hooks.parallel.tapAsync('Task2', (data, callback) => {
      setTimeout(() => {
        console.log('Task2 done');
        callback(null, 'result2');
      }, 50);
    });
  }

  call(data) {
    this.hooks.parallel.callAsync(data, (err, results) => {
      console.log('All tasks completed');
      // results 是所有回调结果的数组
    });
  }
}

---

1.3.2 Webpack 构建流程

// Webpack 构建流程简化实现
class SimpleWebpack {
  constructor(options) {
    this.options = options; // webpack 配置
    this.modules = {};      // 模块缓存
    this.chunks = {};       // chunk 缓存
    this.assets = {};       // 资源缓存
  }

  // 1. run：启动构建
  run() {
    const { entry, output, module, plugins } = this.options;

    console.log('=== Webpack Build Start ===');

    // 2. 执行插件的 apply 方法（插件初始化）
    plugins.forEach(plugin => {
      if (typeof plugin.apply === 'function') {
        plugin.apply(this);
      }
    });

    // 3. 从入口文件开始编译
    const entryModule = this.buildModule(entry, {});

    // 4. 生成 chunk（代码块）
    const chunks = this.createChunks(entryModule);

    // 5. 输出资源
    this.emitAssets(chunks, output);

    console.log('=== Webpack Build Complete ===');
  }

  // 6. buildModule：编译单个模块
  buildModule(filename, parent) {
    // 6.1 读取文件内容
    const source = fs.readFileSync(filename, 'utf-8');
    console.log(`Building: ${filename}`);

    // 6.2 获取 loader 规则
    const rules = this.options.module?.rules || [];

    // 6.3 应用 loader 链
    let processedSource = source;
    for (const rule of rules) {
      if (rule.test.test(filename)) {
        // 执行 loader
        const loader = rule.use;
        if (typeof loader === 'string') {
          // 同步 loader
          const loaderFn = require(loader);
          processedSource = loaderFn(processedSource);
        }
      }
    }

    // 6.4 调用 Webpack 的 module API（处理依赖）
    const module = {
      id: filename,
      dependencies: [], // 存储依赖
      source: processedSource
    };

    // 6.5 解析依赖
    //    使用正则解析 import/require 语句
    const dependencyPattern = /require\(['"](.+?)['"]\)/g;
    let match;
    while ((match = dependencyPattern.exec(processedSource)) !== null) {
      const depPath = path.resolve(dirname(filename), match[1]);
      module.dependencies.push(depPath);
    }

    // 6.6 递归编译依赖模块
    module.dependencies.forEach(dep => {
      this.buildModule(dep, module);
    });

    return module;
  }

  // 7. createChunks：生成代码块
  createChunks(entryModule) {
    // 将模块组合成 chunk
    return [{
      id: 'main',
      modules: [entryModule],
      name: 'main'
    }];
  }

  // 8. emitAssets：输出资源
  emitAssets(chunks, output) {
    for (const chunk of chunks) {
      // 生成文件内容
      const filename = output.filename.replace('[name]', chunk.name);
      this.assets[filename] = this.generateCode(chunk);

      // 写入文件系统
      const outputPath = path.join(output.path, filename);
      fs.writeFileSync(outputPath, this.assets[filename]);
      console.log(`Emitted: ${outputPath}`);
    }
  }

  // 9. generateCode：生成最终代码
  generateCode(chunk) {
    // 拼接模块代码，生成 bundle
    return `
      (function(modules) {
        // 9.1 定义 require 函数
        function __webpack_require__(moduleId) {
          var module = {
            exports: {}
          };
          modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
          return module.exports;
        }

        // 9.2 启动模块加载
        return __webpack_require__("${chunk.modules[0].id}");
      })({
        "${chunk.modules[0].id}": function(module, exports, __webpack_require__) {
          ${chunk.modules[0].source}
        }
      })
    `;
  }
}

---

二、Vite 核心原理

2.1 Vite 核心配置

2.1.1 Vite 基础配置

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import react from '@vitejs/plugin-react';
import cssPlugin from 'vite-plugin-css';
import { viteStaticCopy } from 'vite-plugin-static-copy';

// 1. defineConfig：类型安全的配置函数
//    提供 TypeScript 类型提示和自动补全
export default defineConfig({
  // 2. 项目根目录（默认为 process.cwd()）
  root: process.cwd(),

  // 3. 公共基础路径
  //    - '/'：绝对路径
  //    - './'：相对路径（适合部署到任意路径）
  base: '/',

  // 4. 服务器配置（开发服务器）
  server: {
    // 4.1 端口
    port: 3000,

    // 4.2 是否自动打开浏览器
    open: true,

    // 4.3 代理配置
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    },

    // 4.4 CORS 配置
    cors: true,

    // 4.5 监听所有网卡（局域网可访问）
    host: true,

    // 4.6 热更新配置
    hmr: {
      // 热更新端口
      port: 3001,
      // 是否在同模块激活
      overlay: true
    }
  },

  // 5. 构建配置
  build: {
    // 5.1 目标浏览器
    target: 'es2015',

    // 5.2 输出目录
    outDir: 'dist',

    // 5.3 生成 sourcemap
    sourcemap: false,

    // 5.4 压缩配置
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },

    // 5.5 chunk 大小警告限制
    chunkSizeWarningLimit: 500,

    // 5.6 rollup 配置
    rollupOptions: {
      output: {
        // 手动分包
        manualChunks: {
          'vue-vendor': ['vue', 'vue-router', 'vuex'],
          'element-ui': ['element-plus']
        },
        // 文件名哈希
        entryFileNames: 'js/[name]-[hash].js',
        chunkFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash][extname]'
      }
    }
  },

  // 6. 插件配置
  plugins: [
    // 6.1 Vue 插件
    vue({
      // 是否使用 Vue 3 runtime
      include: [/\.vue$/],
      // 自定义块处理
      customBlocks: {
        'i18n': resolve(__dirname, 'src/i18n')
      }
    }),

    // 6.2 React 插件（Fast Refresh）
    react(),

    // 6.3 静态文件拷贝
    viteStaticCopy({
      targets: [
        { src: 'public/*', dest: 'public' }
      ]
    })
  ],

  // 7. 路径解析
  resolve: {
    // 7.1 文件扩展名
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json'],

    // 7.2 路径别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components'),
      'utils': path.resolve(__dirname, 'src/utils')
    }
  },

  // 8. 依赖优化（开发时）
  optimizeDeps: {
    // 8.1 预构建的依赖
    include: ['vue', 'vue-router', 'element-plus'],

    // 8.2 排除的依赖（不使用预构建）
    exclude: [],

    // 8.3 预构建入口
    entries: ['src/main.js']
  },

  // 9. CSS 配置
  css: {
    // 9.1 CSS 模块化配置
    modules: {
      // 类名生成格式
      localsConvention: 'camelCase',
      // 忽略的文件
      exclude: []
    },

    // 9.2 CSS 预处理器
    preprocessorOptions: {
      scss: {
        // 注入全局变量
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },

  // 10. 日志配置
  logLevel: 'info',

  // 11. 环境变量
  envDir: path.resolve(__dirname, 'env'),
  envPrefix: 'VITE_'
});

---

2.2 Vite 核心原理详解

2.2.1 Vite 工作流程

// Vite 工作流程简化实现

// 1. 开发环境：基于 ES Module 的开发服务器
//    不打包，按需编译，只编译浏览器请求的文件

class ViteDevServer {
  constructor() {
    // 1.1 已编译的模块缓存
    this.moduleCache = new Map();

    // 1.2 已转换的源码缓存（处理过 import/export）
    this.transformCache = new Map();

    // 1.3 依赖图谱
    this.depGraph = new Map();
  }

  // 2. 启动开发服务器
  async start() {
    const server = http.createServer(async (req, res) => {
      // 2.1 解析请求
      const url = req.url.split('?')[0];
      const filePath = path.join(process.cwd(), url);

      try {
        // 2.2 读取文件
        let source = fs.readFileSync(filePath, 'utf-8');

        // 2.3 如果是 JS/TS 文件，进行转换
        if (filePath.endsWith('.js') || filePath.endsWith('.ts')) {
          source = await this.transform(source, filePath);
        }

        // 2.4 发送响应
        res.setHeader('Content-Type', this.getContentType(filePath));
        res.end(source);
      } catch (err) {
        // 2.5 404 处理
        if (err.code === 'ENOENT') {
          res.statusCode = 404;
          res.end('Not Found');
        }
      }
    });

    server.listen(3000);
  }

  // 3. transform：转换源码
  //    核心：处理 import/export，改写为浏览器认识的格式
  async transform(source, filePath) {
    // 3.1 检查缓存
    if (this.transformCache.has(filePath)) {
      return this.transformCache.get(filePath);
    }

    // 3.2 使用 esbuild 转换代码
    //    esbuild 比 Babel 快 10-100 倍
    const result = await esbuild.transform(source, {
      // 目标环境
      target: 'esnext',
      // 启用 sourcemap
      sourcemap: true,
      // 是否支持 JSX
      jsx: 'automatic',
      // 源码格式
      format: 'esm'
    });

    // 3.3 处理依赖（import 语句）
    const deps = this.extractDeps(source);

    // 3.4 更新依赖图谱
    this.depGraph.set(filePath, {
      imports: deps,
      transformed: result.code
    });

    // 3.5 缓存转换结果
    this.transformCache.set(filePath, result.code);

    return result.code;
  }

  // 4. extractDeps：提取依赖
  //    正则匹配 import 语句
  extractDeps(source) {
    const deps = [];

    // 匹配: import xxx from 'yyy'
    // 匹配: import('xxx') 动态导入
    const importRegex = /import\s+(?:(?:[\w*{}\s]+ from )|(?:.* from )|(?:[\w*{}\s]+,\s*\{[\s\w*}]+ from ))?['"]([@\w/-]+)['"]/g;

    let match;
    while ((match = importRegex.exec(source)) !== null) {
      deps.push(match[1]);
    }

    return deps;
  }

  // 5. getContentType：获取 Content-Type
  getContentType(filePath) {
    const ext = path.extname(filePath);
    const types = {
      '.js': 'application/javascript',
      '.ts': 'application/typescript',
      '.css': 'text/css',
      '.html': 'text/html',
      '.json': 'application/json'
    };
    return types[ext] || 'text/plain';
  }
}

// Vite 的核心优势：
// - 开发环境：no-bundle，按需编译，速度快
// - 生产环境：Rollup 打包，代码分割，优化
// - HMR：模块热更新，毫秒级响应

---

2.2.2 Vite 热更新原理

// Vite HMR（热模块替换）实现原理

// 1. HMR 架构
//    - WebSocket 实时推送更新
//    - 客户端根据更新类型决定如何处理

// 2. 更新类型
const HMR_UPDATE_TYPES = {
  // 2.1 js/vue 文件更新：重新执行模块
  'JS_UPDATE': 'js-update',

  // 2.2 CSS 更新：只需更新 <style> 标签内容
  'CSS_UPDATE': 'css-update',

  // 2.3 组件重新渲染
  'RELOAD': 'reload'
};

// 3. HMR 客户端实现
function setupHMRClient() {
  // 3.1 创建 WebSocket 连接
  const socket = new WebSocket('ws://localhost:3001');

  socket.addEventListener('message', async (event) => {
    const { type, path, timestamp } = JSON.parse(event.data);

    switch (type) {
      case 'js-update':
        // 4. JS 更新处理
        await handleJSUpdate(path);
        break;

      case 'css-update':
        // 5. CSS 更新处理
        await handleCSSUpdate(path);
        break;

      case 'reload':
        // 6. 完全重载（某些情况无法热更新）
        window.location.reload();
        break;
    }
  });

  // 4. handleJSUpdate：JS 更新处理
  async function handleJSUpdate(path) {
    // 4.1 从服务器获取更新后的模块
    const newModule = await fetchModule(path);

    // 4.2 更新模块缓存
    updateModuleCache(path, newModule);

    // 4.3 查找使用该模块的所有模块
    const affectedModules = findAffectedModules(path);

    // 4.4 依次执行受影响的模块
    for (const modulePath of affectedModules) {
      const module = getModule(modulePath);
      if (module && module.hot) {
        // 4.5 调用 Vue 的 update 钩子
        if (typeof module.hot.accept === 'function') {
          module.hot.accept();
        }
      }
    }

    // 4.6 打印更新信息
    console.log(`[HMR] Updated: ${path}`);
  }

  // 5. handleCSSUpdate：CSS 更新处理
  async function handleCSSUpdate(path) {
    // 5.1 获取新的 CSS 内容
    const newCSS = await fetchModule(path);

    // 5.2 找到对应的 <style> 标签
    const style = document.querySelector(`link[href*="${path}"]`);

    if (style) {
      // 5.3 直接替换 CSS 内容
      //    不需要刷新页面，用户体验好
      style.textContent = newCSS;
    }

    console.log(`[HMR] CSS Updated: ${path}`);
  }
}

// 6. Vite 插件的 HMR 集成点
//    插件通过 handleHotUpdate 实现 HMR
const vuePlugin = {
  handleHotUpdate({ server, file, modules }) {
    // 6.1 判断文件类型
    if (file.endsWith('.vue')) {
      // 6.2 解析 SFC（Vue 单文件组件）
      const descriptor = parse(file);

      // 6.3 如果是模板变化，只需更新组件实例
      if (descriptor.template) {
        // 发送 css-update 类型
        server.ws.send({
          type: 'css-update',
          path: file
        });

        // 6.4 更新组件的 template
        modules.forEach(m => {
          // 重新执行模块
          server.reload(m);
        });
      }

      // 6.5 如果是脚本变化，需要完整更新
      if (descriptor.script) {
        server.ws.send({
          type: 'reload',
          path: file
        });
      }
    }
  }
};

// Vite HMR 的优势：
// - 精确更新：只更新变化的模块，不重载整个页面
// - 速度快：基于 WebSocket，毫秒级响应
// - 用户体验好：CSS 更新无需刷新，状态保持

---

2.3 Vite 与 Webpack 对比

// Vite vs Webpack 核心对比

// 1. 开发环境启动速度
//    Webpack：需要打包所有模块，构建时间长
//    Vite：基于 ESM，只编译请求的模块，秒级启动

// 2. 热更新速度
//    Webpack：重新构建依赖图，可能打包大量模块
//    Vite：精准更新，只更新变化的模块

// 3. 构建速度（生产环境）
//    Webpack：HMR 模式下可能较慢
//    Vite：使用 Rollup，.tree-shaking 更彻底

// 4. 配置对比
const compareConfig = {
  // Webpack 需要：
  webpack: {
    // 需要配置 mode
    mode: 'development',
    // 需要配置 entry
    entry: './src/main.js',
    // 需要配置 output
    output: { filename: '[name].js' },
    // 需要配置 module.rules
    module: {
      rules: [
        { test: /\.js$/, use: 'babel-loader' },
        { test: /\.vue$/, use: 'vue-loader' }
      ]
    },
    // 需要配置 plugins
    plugins: [
      new HtmlWebpackPlugin(),
      new VueLoaderPlugin()
    ],
    // 需要配置 resolve.alias
    resolve: {
      alias: { '@': path.resolve(__dirname, 'src') }
    }
  },

  // Vite 配置更简洁：
  vite: {
    // 不需要 mode（自动根据环境）
    // 不需要 entry（默认从 index.html 开始）
    // 不需要 output（自动处理）
    plugins: [vue()],
    // resolve 就是顶层配置
    resolve: {
      alias: { '@': path.resolve(__dirname, 'src') }
    }
    // server 和 build 是顶层配置
  }
};

// 5. 依赖预构建（预绑定）
//    Vite 使用 esbuild 预构建依赖，比 Webpack 快 10-100 倍
//    Webpack 使用 thread-loader 或 cache-loader 实现类似功能

// 6. 适用场景
const适用场景 = {
  vite: [
    '小型/中型项目（< 500 个模块）',
    '需要快速启动的开发环境',
    'Vue 3 / React 17+ 项目',
    'TypeScript 项目（esbuild 原生支持）'
  ],
  webpack: [
    '大型复杂项目（> 1000 个模块）',
    '需要高度自定义的构建流程',
    '旧项目迁移',
    '需要兼容性优先（IE11）'
  ]
};

---

三、前端性能优化

3.1 运行时性能优化

3.1.1 React 性能优化

// 1. React.memo：包装组件，避免不必要的重渲染
//    只有 props 变化时才重渲染

import { memo } from 'react';

// 1.1 普通组件包装
const Button = memo(function Button({ onClick, children }) {
  return <button onClick={onClick}>{children}</button>;
});

// 1.2 带比较函数的 memo（精细控制）
const ProductList = memo(
  function ProductList({ products, onSelect }) {
    return (
      <ul>
        {products.map(p => (
          <ProductItem
            key={p.id}
            product={p}
            onSelect={onSelect}
          />
        ))}
      </ul>
    );
  },
  // 1.3 自定义比较函数
  //    prevProps 和 nextProps 是前后两次的 props
  //    返回 true 表示相同时，不重渲染
  (prevProps, nextProps) => {
    // 只比较 products 数组内容（引用变化但内容相同时不重渲染）
    return prevProps.products === nextProps.products;
  }
);

// 2. useMemo：缓存计算结果
//    避免每次渲染都重新计算

import { useMemo } from 'react';

function ExpensiveList({ items, filter }) {
  // 2.1 依赖数组 [items, filter]
  //    只有 items 或 filter 变化时才重新计算
  //    items 和 filter 没变化时，直接返回缓存的结果
  const filteredItems = useMemo(() => {
    console.log('Filtering items...'); // 验证是否重新计算

    return items.filter(item => {
      // 过滤逻辑
      return item.name.includes(filter);
    });
  }, [items, filter]); // 依赖项

  return <List data={filteredItems} />;
}

// 2.2 useMemo 用于引用稳定
//    避免子组件因为引用变化而重渲染
const contextValue = useMemo(() => ({
  // 创建复杂的上下文值
  theme: 'dark',
  toggleTheme: () => {}
}), []); // 空依赖，引用永远不变

<ThemeContext.Provider value={contextValue}>
  {children}
</ThemeContext.Provider>;

// 3. useCallback：缓存回调函数
//    避免子组件因为回调函数引用变化而重渲染

import { useCallback } from 'react';

function ParentComponent() {
  const [count, setCount] = useState(0);

  // 3.1 使用 useCallback 包装回调
  //    count 作为依赖时，count 变化才创建新函数
  //    空依赖 [] 时，函数引用永远不变
  const handleClick = useCallback((event) => {
    console.log('Clicked:', event.target);
    setCount(c => c + 1);
  }, []); // 空依赖，函数引用稳定

  return <MemoizedButton onClick={handleClick} />;
}

// 3.2 useCallback 的典型场景
//    传给使用 React.memo 包装的子组件的回调
const MemoizedButton = memo(function Button({ onClick, children }) {
  console.log('Button rendered');
  return <button onClick={onClick}>{children}</button>;
});

// 4. useTransition：标记非紧急更新
//    让紧急更新（如输入）优先渲染

import { useState, useTransition } from 'react';

function SearchComponent() {
  const [query, setQuery] = useState('');
  // 4.1 isPending 表示过渡是否进行中
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    const value = e.target.value;
    setQuery(value); // 紧急更新，立即响应

    // 4.2 startTransition 包裹的更新是不紧急的
    //    可以被输入等紧急更新打断
    startTransition(() => {
      // 这里是搜索相关的更新
      // 即使慢，也不会阻塞输入
      fetchResults(value);
    });
  };

  return (
    <div>
      <input value={query} onChange={handleChange} />
      {isPending && <LoadingSpinner />}
    </div>
  );
}

// 5. useDeferredValue：延迟更新
//    与 useTransition 类似，但用于值

import { useDeferredValue } from 'react';

function SearchResults({ query }) {
  // 5.1 deferredQuery 会比 query 延迟更新
  //    浏览器可以在延迟期间响应输入
  const deferredQuery = useDeferredValue(query);

  // 5.2 使用 isStale 判断是否在延迟中
  const isStale = query !== deferredQuery;

  return (
    <div style={{ opacity: isStale ? 0.5 : 1 }}>
      {/* 根据 deferredQuery 渲染结果 */}
      <Results query={deferredQuery} />
    </div>
  );
}

// 6. useRef：保持引用稳定
//    用于存储不需要触发渲染的数据

function Timer() {
  // 6.1 ref 不会引起组件重渲染
  const intervalRef = useRef(null);
  const countRef = useRef(0);

  useEffect(() => {
    // 6.2 ref.current 可以直接修改
    intervalRef.current = setInterval(() => {
      countRef.current += 1;
      console.log('Count:', countRef.current);
    }, 1000);

    return () => clearInterval(intervalRef.current);
  }, []);

  return <div>{countRef.current}</div>;
}

// 7. 虚拟列表：大量数据渲染优化
import { useVirtualizer } from 'react-virtual';

function VirtualList({ items }) {
  const parentRef = useRef(null);

  // 7.1 虚拟化配置
  const rowVirtualizer = useVirtualizer({
    count: items.length, // 总数量
    getScrollElement: () => parentRef.current,
    estimateSize: () => 50, // 每行预估高度
    overscan: 5 // 视口外渲染数量
  });

  return (
    <div ref={parentRef} style={{ height: '400px', overflow: 'auto' }}>
      <div style={{ height: rowVirtualizer.getTotalSize() }}>
        {rowVirtualizer.getVirtualItems().map((virtualRow) => (
          <div
            key={virtualRow.key}
            style={{
              position: 'absolute',
              top: virtualRow.start,
              height: virtualRow.size
            }}
          >
            <ListItem item={items[virtualRow.index]} />
          </div>
        ))}
      </div>
    </div>
  );
}

---

3.1.2 渲染性能优化

// 1. 避免使用 index 作为 key
//    错误的做法：删除中间项会导致 index 变化，重新渲染
const BadList = ({ items }) => (
  <ul>
    {items.map((item, index) => (
      // index 作为 key，删除 item[1] 后，item[2] 的 key 从 2 变成 1
      // React 会认为这是同一个元素，只是位置变了
      <li key={index}>{item.name}</li>
    ))}
  </ul>
);

// 正确的做法：使用唯一 id
const GoodList = ({ items }) => (
  <ul>
    {items.map(item => (
      // 唯一 id 作为 key，删除 item[1] 时，item[2] 不受影响
      <li key={item.id}>{item.name}</li>
    ))}
  </ul>
);

// 2. 避免在渲染中创建新函数/对象
//    错误的做法：每次渲染都创建新回调
function BadComponent({ items }) {
  return (
    <ul>
      {items.map(item => (
        // onClick 每次都是新函数，导致子组件重渲染
        <Item key={item.id} onClick={() => console.log(item.id)} />
      ))}
    </ul>
  );
}

// 3. 列表项使用 React.memo + 稳定 key
const Item = memo(function Item({ id, onClick }) {
  return <li onClick={onClick}>{id}</li>;
});

// 4. 避免嵌套层级过深
//    深层嵌套的组件树会导致 diff 算法变慢
//    使用扁平化结构或 Portal

// 5. 使用 Fragment 减少节点数量
function TableRow() {
  return (
    // Fragment 不产生真实 DOM 节点，减少 DOM 节点数量
    <>
      <td>Name</td>
      <td>Age</td>
    </>
  );
}

// 6. 条件渲染优化
function ConditionalRender({ shouldShow, heavyComponent }) {
  // 6.1 早 return 避免不必要渲染
  if (!shouldShow) {
    return null; // 不渲染任何东西
  }

  // 6.2 懒加载非首屏组件
  const LazyHeavy = lazy(() => import('./HeavyComponent'));

  return (
    <>
      <Header />
      {/* 懒加载，只有在需要时才加载 */}
      {shouldShow && <LazyHeavy />}
    </>
  );
}

---

3.2 网络性能优化

3.2.1 资源加载优化

// 1. 预加载关键资源
// <link rel="preload"> 提前加载即将使用的资源

// 预加载字体
<link rel="preload" href="/fonts/custom.woff2" as="font" crossorigin="anonymous">

// 预加载 JS
<link rel="preload" href="/main.js" as="script">

// 预加载 CSS
<link rel="preload" href="/styles.css" as="style">

// 2. 预连接
//    提前建立 TCP/TLS 连接
<link rel="preconnect" href="https://cdn.example.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

// 3. 懒加载图片
// <img loading="lazy"> 原生懒加载
const LazyImage = ({ src, alt }) => (
  <img loading="lazy" src={src} alt={alt} />
);

// 4. 第三方资源优化
//    使用 Intersection Observer 实现懒加载

class LazyLoad {
  constructor(selector) {
    // 4.1 创建 IntersectionObserver
    //    当元素进入视口时触发回调
    this.observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            // 4.2 加载资源
            this.loadResource(entry.target);
            // 4.3 停止观察
            this.observer.unobserve(entry.target);
          }
        });
      },
      {
        rootMargin: '50px 0px', // 提前 50px 开始加载
        threshold: 0.01
      }
    );

    // 4.4 开始观察所有目标元素
    document.querySelectorAll(selector).forEach(el => {
      this.observer.observe(el);
    });
  }

  loadResource(element) {
    // 处理图片懒加载
    if (element.tagName === 'IMG') {
      element.src = element.dataset.src;
    }

    // 处理脚本懒加载
    if (element.tagName === 'SCRIPT') {
      const script = document.createElement('script');
      script.src = element.dataset.src;
      document.body.appendChild(script);
    }
  }
}

// 使用
new LazyLoad('img[data-src], script[data-src]');

// 5. 请求合并
//    将多个小请求合并为一个大请求

class RequestBatcher {
  constructor(batchSize = 10, delay = 100) {
    this.queue = [];        // 待处理请求队列
    this.batchSize = batchSize; // 每批数量
    this.delay = delay;      // 延迟时间（ms）

    // 定时器
    this.timer = null;
  }

  // 5.1 添加请求
  add(request) {
    return new Promise((resolve, reject) => {
      this.queue.push({ request, resolve, reject });
      this.schedule();
    });
  }

  // 5.2 调度执行
  schedule() {
    if (this.timer) return;

    this.timer = setTimeout(() => {
      this.flush();
      this.timer = null;
    }, this.delay);
  }

  // 5.3 执行批量请求
  async flush() {
    // 取出最多 batchSize 个请求
    const batch = this.queue.splice(0, this.batchSize);

    // 批量执行
    try {
      const results = await batchRequest(batch.map(b => b.request));
      batch.forEach((item, index) => {
        item.resolve(results[index]);
      });
    } catch (err) {
      batch.forEach(item => item.reject(err));
    }
  }
}

// 6. DNS 预解析
//    提前解析域名，减少连接时间
<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//api.example.com">
<link rel="dns-prefetch" href="//cdn.example.com">

---

3.2.2 缓存策略实现

// 1. Service Worker 缓存策略

// 注册 Service Worker
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js')
    .then(registration => {
      console.log('SW registered:', registration.scope);
    });
}

// sw.js 内容
const CACHE_NAME = 'v1';
const STATIC_ASSETS = [
  '/',
  '/index.html',
  '/main.js',
  '/styles.css'
];

// 1.1 安装事件：缓存静态资源
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      return cache.addAll(STATIC_ASSETS);
    })
  );
  // 跳过等待，立即激活
  self.skipWaiting();
});

// 1.2 激活事件：清理旧缓存
self.addEventListener('activate', (event) => {
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames
          .filter(name => name !== CACHE_NAME)
          .map(name => caches.delete(name))
      );
    })
  );
  // 立即接管所有页面
  self.clients.claim();
});

// 1.3 请求拦截：实现缓存策略
self.addEventListener('fetch', (event) => {
  const { request } = event;
  const url = new URL(request.url);

  // 根据 URL 选择策略
  if (url.pathname.startsWith('/api/')) {
    // API 请求：网络优先，失败时用缓存
    event.respondWith(networkFirst(request));
  } else if (isStaticAsset(url.pathname)) {
    // 静态资源：缓存优先，失败时用网络
    event.respondWith(cacheFirst(request));
  }
});

// 1.4 缓存优先策略
async function cacheFirst(request) {
  // 先从缓存中查找
  const cached = await caches.match(request);
  if (cached) {
    return cached;
  }

  // 缓存中没有，发起网络请求
  const response = await fetch(request);

  // 将响应缓存
  const cache = await caches.open(CACHE_NAME);
  cache.put(request, response.clone());

  return response;
}

// 1.5 网络优先策略
async function networkFirst(request) {
  try {
    const response = await fetch(request);

    // 成功时更新缓存
    const cache = await caches.open(CACHE_NAME);
    cache.put(request, response.clone());

    return response;
  } catch (error) {
    // 失败时返回缓存
    const cached = await caches.match(request);
    if (cached) {
      return cached;
    }

    // 没有缓存，返回离线响应
    return new Response('Offline', { status: 503 });
  }
}

// 2. HTTP 缓存配置（服务器端）

// Node.js Express 示例
const express = require('express');
const app = express();

// 2.1 强缓存：Cache-Control
app.use('/static/', express.static('public', {
  // 资源可以被任何缓存存储
  maxAge: 31536000, // 1 年
  // 缓存时使用 Vary: Accept-Encoding
  etag: true
}));

// 2.2 协商缓存：Last-Modified / ETag
app.get('/api/data', (req, res) => {
  // 检查 If-Modified-Since
  const lastModified = req.headers['if-modified-since'];
  // 检查 If-None-Match
  const etag = req.headers['if-none-match'];

  const data = getData();

  // 如果没有变化，返回 304
  if (lastModified === data.lastModified) {
    return res.status(304).end();
  }

  if (etag === data.etag) {
    return res.status(304).end();
  }

  // 返回完整数据和缓存头
  res.set({
    'Last-Modified': data.lastModified,
    'ETag': data.etag,
    'Cache-Control': 'private, max-age=60'
  });
  res.json(data);
});

// 3. 浏览器内存缓存
// 使用 sessionStorage/localStorage 手动控制

class CacheManager {
  constructor(storage = localStorage) {
    this.storage = storage;
    this.prefix = 'cache:';
  }

  // 3.1 设置缓存（带过期时间）
  set(key, value, ttl = 3600000) {
    const data = {
      value,
      expiry: Date.now() + ttl
    };
    this.storage.setItem(this.prefix + key, JSON.stringify(data));
  }

  // 3.2 获取缓存
  get(key) {
    const raw = this.storage.getItem(this.prefix + key);
    if (!raw) return null;

    const data = JSON.parse(raw);

    // 检查是否过期
    if (Date.now() > data.expiry) {
      this.delete(key);
      return null;
    }

    return data.value;
  }

  // 3.3 删除缓存
  delete(key) {
    this.storage.removeItem(this.prefix + key);
  }

  // 3.4 清空所有缓存
  clear() {
    Object.keys(this.storage)
      .filter(key => key.startsWith(this.prefix))
      .forEach(key => this.storage.removeItem(key));
  }
}

---

3.3 构建性能优化

3.3.1 Webpack 构建优化

// 1. 减少解析范围

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        // 1.1 排除 node_modules，大幅提升速度
        exclude: /node_modules/,
        // 或者使用 include 精确指定
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader'
      }
    ]
  },

  // 2. 开启缓存
  cache: {
    // 2.1 使用文件系统缓存
    type: 'filesystem',
    // 2.2 缓存目录
    buildPath: '.cache',
    // 2.3 缓存配置
    cacheDirectory: path.resolve(__dirname, '.cache/babel'),
    // 2.4 压缩等级
    compression: 'gzip',
    // 2.5 缓存版本
    version: 'v1'
  },

  // 3. 并行构建
  optimization: {
    // 3.1 使用 thread-loader 启用多进程
    module: {
      rules: [
        {
          test: /\.js$/,
          use: [
            {
              loader: 'thread-loader',
              options: {
                workers: 4, // 启动 4 个 worker
                workerParallelJobs: 50
              }
            },
            'babel-loader'
          ]
        }
      ]
    },

    // 3.2 使用 TerserPlugin 多进程压缩
    minimizer: [
      new TerserPlugin({
        parallel: true, // 启用多进程
        terserOptions: {
          compress: {
            drop_console: true
          }
        }
      })
    ]
  },

  // 4. 减少查找路径
  resolve: {
    // 4.1 明确指定模块目录，减少搜索
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules'
    ],
    // 4.2 减少扩展名列表
    extensions: ['.js', '.vue', '.json'],
    // 4.3 使用 alias 快速定位
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'vue$': 'vue/dist/vue.esm.js'
    }
  },

  // 5. 分包策略
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // 第三方库单独打包
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10,
          reuseExistingChunk: true // 复用已存在的 chunk
        },
        // 公共模块打包
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true
        }
      }
    },
    // 运行时单独打包
    runtimeChunk: 'single'
  },

  // 6. 生成环境优化
  mode: 'production',
  // 6.1 不生成 sourcemap
  devtool: false,
  // 6.2 启用 tree-shaking
  optimization: {
    usedExports: true,
    sideEffects: true
  },
  // 6.3 标记副作用
  module: {
    rules: [
      {
        test: /\.css$/,
        sideEffects: true
      }
    ]
  }
};

---

3.3.2 Vite 构建优化

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  // 1. 依赖预构建
  optimizeDeps: {
    // 1.1 需要预构建的依赖
    include: [
      'vue',
      'vue-router',
      'vuex',
      'element-plus',
      'lodash-es'
    ],
    // 1.2 排除不需要预构建的
    exclude: [],
    // 1.3 构建算法
    buildId: 'vite',
    // 1.4 清理缓存
    clean: false
  },

  build: {
    // 2. 目标环境
    target: 'es2015',
    // 2.1 不生成 sourcemap
    sourcemap: false,
    // 2.2 压缩
    minify: 'terser',
    // 2.3 chunk 大小警告
    chunkSizeWarningLimit: 500,
    // 2.4 手动分包
    rollupOptions: {
      output: {
        manualChunks: {
          // Vue 相关
          'vue-vendor': ['vue', 'vue-router', 'vuex'],
          // UI 库
          'element-vendor': ['element-plus'],
          // 工具库
          'utils-vendor': ['lodash-es', 'axios']
        },
        // 分割 vendor
        vendorChunkId: 'vendors'
      }
    },

    // 3. CSS 代码分割
    cssCodeSplit: true,

    // 4. 资源内联阈值
    // 4.1 小于此大小的资源内联为 base64
    assetsInlineLimit: 4096 // 4KB

    // 5. 静态资源内联
    //    使用 ?inline 查询参数内联资源
    //    <script src="./utils.js?inline">
  },

  // 6. 压缩配置
  compress: {
    // 6.1 gzip 压缩
    gzip: true,
    // 6.2 gzip 压缩级别
    gzipSize: 0.5,
    // 6.3 brotli 压缩
    brotli: true
  },

  // 7. 构建分析
  // 使用 vite-plugin-visualizer
  plugins: [
    // 可视化构建分析
    // { stats: 'summary' }
  ],

  // 8. 环境变量注入
  define: {
    // 注入全局变量，避免运行时求值
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version)
  }
});

---

四、浏览器原理与前端架构

4.1 浏览器渲染原理

4.1.1 关键渲染路径

// 1. 关键渲染路径（Critical Rendering Path）
//    从 HTML 到像素在屏幕上显示的过程

// 1.1 构建 DOM 树
//    HTML 解析器逐行解析 HTML，构建 DOM 树
//    遇到 <script> 会阻塞渲染（默认行为）

// 1.2 构建 CSSOM 树
//    CSS 解析器解析所有 CSS（内联、外链、inline）
//    CSS 是 "渲染阻塞"：必须等到所有 CSS 下载解析完才能渲染

// 1.3 合成渲染树（Render Tree）
//    DOM + CSSOM = Render Tree
//    只包含可见节点（display: none 的不包含）

// 1.4 布局（Layout）
//    计算每个节点的位置和大小
//    首次布局后，后续更新叫 "重排"（reflow）

// 1.5 绘制（Paint）
//    将节点转换为像素
//    首次绘制后，后续更新叫 "重绘"（repaint）

// 1.6 合成（Composite）
//    将各层合成为最终图像
//    使用 GPU 加速

// 2. 优化关键渲染路径
// 2.1 减少关键资源数量
//    - 异步加载 JS：<script async> 或 <script defer>
//    - 合并 CSS
//    - 预加载关键资源

// 2.2 减少关键路径长度
//    - 精简 CSS（移除未使用的样式）
//    - 压缩资源

// 2.3 减少关键字节数
//    - gzip 压缩
//    - HTTP/2 多路复用

// 3. 示例：异步加载脚本
// 不阻塞渲染
<script defer src="/main.js"></script>
// defer 在 HTML 解析完成后执行，按顺序执行
// 阻塞渲染，但可以在下载期间解析 HTML

<script async src="/analytics.js"></script>
// async 下载完立即执行，不按顺序，可能阻塞渲染

// 4. CSS 加载优化
// <link rel="preload"> 提前加载关键 CSS
<link rel="preload" href="/critical.css" as="style" onload="this.rel='stylesheet'">

// 5. 内联关键 CSS
//    将首屏需要的 CSS 内联到 <head> 中
<style>
  /* 关键 CSS */
  body { margin: 0; padding: 0; }
  .header { background: #333; }
</style>

// 非关键 CSS 异步加载
<link rel="preload" href="/non-critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/non-critical.css"></noscript>

---

4.1.2 事件循环与渲染调度

// 1. 事件循环（Event Loop）
//    JavaScript 单线程的执行模型

// 1.1 执行栈（Call Stack）
//    存放正在执行的函数
function foo() {
  bar(); // 调用 bar
}

function bar() {
  console.log('bar');
}

foo(); // foo 入栈 -> bar 入栈 -> bar 出栈 -> foo 出栈

// 1.2 任务队列（Task Queue）
//    宏任务：setTimeout, setInterval, I/O, UI rendering
//    微任务：Promise.then, MutationObserver, queueMicrotask

console.log('1'); // 同步，立即执行

setTimeout(() => {
  console.log('2'); // 宏任务，在下一个事件循环执行
}, 0);

Promise.resolve().then(() => {
  console.log('3'); // 微任务，在当前事件循环末尾执行
});

console.log('4'); // 同步

// 输出顺序：1, 4, 3, 2
// 微任务在下一个宏任务之前执行

// 2. requestAnimationFrame（RAF）
//    在下一次浏览器重绘之前调用
//    用于动画和视觉更新

let startTime;
function animate(timestamp) {
  if (!startTime) startTime = timestamp;
  const elapsed = timestamp - startTime;

  // 执行动画
  element.style.transform = `translateX(${elapsed}px)`;

  if (elapsed < 1000) {
    // 继续动画
    requestAnimationFrame(animate);
  }
}

requestAnimationFrame(animate);
// 每秒 60 帧（大约 16.67ms）

// 3. requestIdleCallback
//    在浏览器空闲时执行低优先级任务
//    用于后台工作，不影响主线程

requestIdleCallback((deadline) => {
  // deadline.timeRemaining() 返回剩余时间
  // deadline.didTimeout 是否超时

  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    const task = tasks.shift();
    task();
  }

  // 如果还有任务，继续调度
  if (tasks.length > 0) {
    requestIdleCallback(arguments.callee);
  }
}, { timeout: 2000 }); // 2秒超时

// 4. 宏任务与微任务调度
console.log('script start'); // 1

setTimeout(() => console.log('setTimeout'), 0); // 宏任务

Promise.resolve()
  .then(() => console.log('Promise 1'))
  .then(() => console.log('Promise 2'));

queueMicrotask(() => console.log('queueMicrotask'));

console.log('script end'); // 2

// 输出：
// script start
// script end
// Promise 1
// queueMicrotask
// Promise 2
// setTimeout

// 5. 渲染时机
//    浏览器在每个宏任务之后检查是否需要渲染
//    同一事件循环内多次 DOM 修改，合并为一次渲染

// 错误的做法：多次修改触发多次重排
element.style.transform = 'translateX(100px)';
element.style.transform = 'translateX(200px)'; // 覆盖前一个

// 正确的做法：合并修改
element.style.transform = 'translateX(200px)'; // 只触发一次

// 6. 使用 requestAnimationFrame 批量更新
class BatchUpdater {
  constructor() {
    this.pendingUpdates = [];
    this.frameId = null;
  }

  scheduleUpdate(update) {
    this.pendingUpdates.push(update);

    if (!this.frameId) {
      this.frameId = requestAnimationFrame(() => {
        this.flush();
      });
    }
  }

  flush() {
    // 在下一帧批量执行所有更新
    this.pendingUpdates.forEach(fn => fn());
    this.pendingUpdates = [];
    this.frameId = null;
  }
}

---

4.2 前端架构设计

4.2.1 微前端架构

// 微前端（Micro Frontends）架构实现

// 1. 微前端基座（主应用）
class MicroFrontend {
  constructor() {
    // 存储注册的子应用
    this.apps = {};
    // 当前激活的子应用
    this.currentApp = null;
  }

  // 1.1 注册子应用
  register(name, entry, props = {}) {
    this.apps[name] = {
      entry,     // 子应用入口（HTML/JS）
      props,     // 传递给子应用的 props
      instance: null, // 子应用实例
      activeRule: null // 激活规则
    };
  }

  // 1.2 设置激活规则
  setActiveRule(name, rule) {
    if (this.apps[name]) {
      this.apps[name].activeRule = rule;
    }
  }

  // 1.3 启动子应用
  async mount(name) {
    const app = this.apps[name];
    if (!app) throw new Error(`App ${name} not found`);

    // 获取子应用资源
    const { scripts, styles } = await this.loadAssets(app.entry);

    // 加载样式
    await this.loadStyles(styles);

    // 加载脚本并执行
    const mountFunction = await this.loadScripts(scripts);

    // 调用子应用的 mount 方法
    app.instance = mountFunction(app.props);

    this.currentApp = name;
  }

  // 1.4 卸载子应用
  async unmount(name) {
    const app = this.apps[name];
    if (app && app.instance) {
      // 调用子应用的 unmount 方法
      if (typeof app.instance.unmount === 'function') {
        await app.instance.unmount();
      }
      app.instance = null;
    }

    if (this.currentApp === name) {
      this.currentApp = null;
    }
  }

  // 1.5 加载资源
  async loadAssets(entry) {
    // 获取 HTML
    const html = await fetch(entry).then(r => r.text());

    // 解析 HTML 中的 script 和 link 标签
    const parser = new DOMParser();
    const doc = parser.parseFromString(html, 'text/html');

    const scripts = Array.from(doc.querySelectorAll('script[src]'))
      .map(s => s.src);
    const styles = Array.from(doc.querySelectorAll('link[href]'))
      .filter(l => l.rel === 'stylesheet')
      .map(l => l.href);

    return { scripts, styles };
  }

  // 1.6 加载样式
  async loadStyles(urls) {
    await Promise.all(urls.map(url => {
      return new Promise((resolve, reject) => {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = url;
        link.onload = resolve;
        link.onerror = reject;
        document.head.appendChild(link);
      });
    }));
  }

  // 1.7 加载脚本
  async loadScripts(urls) {
    // 依次加载脚本（保持顺序）
    for (const url of urls) {
      await this.loadScript(url);
    }
  }

  async loadScript(url) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = url;
      script.onload = resolve;
      script.onerror = reject;
      document.body.appendChild(script);
    });
  }
}

// 2. 子应用导出（子应用需导出以下生命周期）
// 子应用 main.js 示例：
export function mount(props) {
  // 创建应用实例
  const app = createApp(App);

  // 挂载到容器
  app.mount(props.container);

  // 返回实例
  return {
    unmount() {
      app.unmount();
    }
  };
}

// 3. 路由驱动
function setupRouter() {
  // 子应用路由
  const routes = [
    { path: '/app1/*', app: 'app1' },
    { path: '/app2/*', app: 'app2' }
  ];

  window.addEventListener('popstate', () => {
    renderRoute();
  });

  function renderRoute() {
    const path = window.location.pathname;

    for (const route of routes) {
      if (path.match(route.path)) {
        // 挂载对应的子应用
        microFrontend.mount(route.app);
        return;
      }
    }

    // 404
    microFrontend.unmount(currentApp);
  }

  // 拦截链接点击
  document.addEventListener('click', (e) => {
    const link = e.target.closest('a[href]');
    if (link && link.href.startsWith(window.location.origin)) {
      e.preventDefault();
      window.history.pushState(null, '', link.href);
      renderRoute();
    }
  });

  renderRoute();
}

// 4. 子应用通信（自定义事件）
// 4.1 主应用发送事件
function emit(event, data) {
  window.dispatchEvent(new CustomEvent(`mf:${event}`, { detail: data }));
}

// 4.2 子应用监听事件
window.addEventListener('mf:data', (e) => {
  console.log('Received:', e.detail);
});

// 4.3 使用 shared 模块共享状态
const sharedState = {
  user: null,
  setUser(user) {
    this.user = user;
    // 通知所有应用
    window.dispatchEvent(new CustomEvent('user:change', { detail: user }));
  }
};

// 4.4 子应用获取状态
function getSharedState() {
  return sharedState.user;
}

---

4.2.2 模块联邦（Module Federation）

// Webpack 5 模块联邦（Module Federation）
// 允许独立构建的应用共享模块

// 1. 主机应用（Host）
// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 1.1 应用名称
      name: 'host_app',

      // 1.2 暴露的模块（其他应用可引用）
      // 其他应用可以通过 import('host_app/navbar') 使用
      exposes: {
        './Navbar': './src/components/Navbar'
      },

      // 1.3 共享的依赖（多个应用共用同一个库）
      shared: {
        // 共享 vue
        vue: {
          singleton: true, // 单例模式，整个页面只有一个 vue 实例
          requiredVersion: '^3.0.0'
        },
        // 共享 vuex
        vuex: {
          singleton: true
        }
      }
    })
  ]
};

// 2. 远程应用（Remote）
// webpack.config.js
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      // 2.1 应用名称
      name: 'remote_app',

      // 2.2 暴露的模块
      exposes: {
        './Button': './src/components/Button',
        './Card': './src/components/Card'
      },

      // 2.3 远程地址（主机引用时从此地址加载）
      // 在开发环境可以是 localhost
      // 在生产环境需要指向实际部署地址
      filename: 'remoteEntry.js', // 生成的入口文件名

      shared: ['vue']
    })
  ]
};

// 3. 主机应用使用远程模块
// App.js
import React, { lazy, Suspense } from 'react';

// 3.1 方式一：直接 import（同步）
// import Button from 'remote_app/Button';

// 3.2 方式二：懒加载（异步）
const Button = lazy(() => import('remote_app/Button'));

function App() {
  return (
    <div>
      <h1>Host App</h1>
      <Suspense fallback={<div>Loading Button...</div>}>
        <Button />
      </Suspense>
    </div>
  );
}

// 4. 动态引用（运行时加载）
// 4.1 创建容器
const container = document.createElement('div');

// 4.2 动态加载远程模块
async function loadRemoteModule(remoteName, moduleName) {
  // 动态导入远程入口
  await __webpack_require__.e(`${remoteName}-${moduleName}`);

  // 获取模块
  return __webpack_require__(`.${remoteName}/${moduleName}`);
}

// 使用
async function loadButton() {
  const { default: Button } = await loadRemoteModule('remote_app', './Button');
  return Button;
}

// 5. 模块联邦类型共享
// 5.1 暴露类型
new ModuleFederationPlugin({
  name: 'shared_lib',
  // 暴露类型定义
  exposes: {
    './types': './src/types/index.ts'
  }
});

// 5.2 使用共享类型
// 在 tsconfig.json 中配置
{
  "compilerOptions": {
    "paths": {
      "shared_lib/*": ["./node_modules/shared_lib/*"]
    }
  }
}

// 6. 运行时共享
// 如果 remote_app 需要共享状态，可以通过 shared 模块

// remote_app 暴露一个 store
new ModuleFederationPlugin({
  name: 'remote_app',
  exposes: {
    './store': './src/store'
  },
  shared: ['vue']
});

// host_app 在使用时可以传递自己的 store
import("./remote_app/store").then(module => {
  // 使用 host 提供的 store
  module.initStore(hostStore);
});

---

4.3 前端监控与错误处理

4.3.1 错误监控实现

// 1. 全局错误监控
class ErrorMonitor {
  constructor(options = {}) {
    this.options = options;
    this.errors = []; // 错误队列
    this.maxQueue = options.maxQueue || 100; // 最大队列长度
  }

  // 1.1 初始化监控
  init() {
    // 监控未捕获的异步错误
    window.addEventListener('error', (event) => {
      this.handleError({
        type: 'error',
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        stack: event.error?.stack
      });
    });

    // 监控未捕获的 Promise 错误
    window.addEventListener('unhandledrejection', (event) => {
      this.handleError({
        type: 'unhandledrejection',
        message: event.reason?.message || event.reason,
        stack: event.reason?.stack
      });
    });

    // 监控资源加载错误
    window.addEventListener('error', (event) => {
      if (event.target !== window) {
        this.handleError({
          type: 'resource',
          message: `Failed to load: ${event.target.src || event.target.href}`
        });
      }
    }, true);
  }

  // 1.2 处理错误
  handleError(error) {
    const errorInfo = {
      ...error,
      timestamp: Date.now(),
      url: window.location.href,
      userAgent: navigator.userAgent
    };

    // 添加到队列
    this.errors.push(errorInfo);

    // 超过最大长度，移除最早的
    if (this.errors.length > this.maxQueue) {
      this.errors.shift();
    }

    // 上报错误
    this.report(errorInfo);
  }

  // 1.3 上报错误
  report(errorInfo) {
    // 延迟发送，避免影响性能
    setTimeout(() => {
      this.sendToServer(errorInfo);
    }, 1000);
  }

  async sendToServer(errorInfo) {
    try {
      await fetch('/api/errors', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(errorInfo)
      });
    } catch (e) {
      console.error('Failed to report error:', e);
    }
  }

  // 1.4 获取错误列表
  getErrors() {
    return [...this.errors];
  }

  // 1.5 清空错误列表
  clear() {
    this.errors = [];
  }
}

// 使用
const monitor = new ErrorMonitor({ maxQueue: 50 });
monitor.init();

// 2. Vue 错误监控
Vue.config.errorHandler = (err, vm, info) => {
  console.error('Vue Error:', err);
  console.error('Component:', vm);
  console.error('Info:', info);
};

// 3. React 错误边界
class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state，使下次渲染显示 fallback UI
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // 上报错误
    console.error('React Error:', error, errorInfo);

    // 可以在这里发送错误到服务器
    reportError(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback || <div>出错了</div>;
    }

    return this.props.children;
  }
}

// 使用
<ErrorBoundary fallback={<div>加载失败</div>}>
  <MyComponent />
</ErrorBoundary>;

// 4. 性能监控
class PerformanceMonitor {
  constructor() {
    this.metrics = {};
  }

  // 4.1 监控页面加载
  observeLoad() {
    // LCP (Largest Contentful Paint)
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const lastEntry = entries[entries.length - 1];
      console.log('LCP:', lastEntry.startTime);
    }).observe({ entryTypes: ['largest-contentful-paint'] });

    // FID (First Input Delay)
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      entries.forEach(entry => {
        console.log('FID:', entry.processingStart - entry.startTime);
      });
    }).observe({ entryTypes: ['first-input'] });

    // CLS (Cumulative Layout Shift)
    new PerformanceObserver((entryList) => {
      let cls = 0;
      entries.forEach(entry => {
        if (!entry.hadRecentInput) {
          cls += entry.value;
        }
      });
      console.log('CLS:', cls);
    }).observe({ entryTypes: ['layout-shift'] });
  }

  // 4.2 监控资源加载
  observeResource() {
    new PerformanceObserver((entryList) => {
      entries.getEntries().forEach(entry => {
        console.log('Resource:', {
          name: entry.name,
          duration: entry.duration,
          size: entry.transferSize
        });
      });
    }).observe({ entryTypes: ['resource'] });
  }

  // 4.3 获取完整性能指标
  getMetrics() {
    const timing = performance.timing;

    return {
      // DNS 解析时间
      dns: timing.domainLookupEnd - timing.domainLookupStart,
      // TCP 连接时间
      tcp: timing.connectEnd - timing.connectStart,
      // TTFB (Time To First Byte)
      ttfb: timing.responseStart - timing.requestStart,
      // DOM 解析时间
      domParse: timing.domInteractive - timing.responseEnd,
      // DOM Content Loaded
      domReady: timing.domContentLoadedEventEnd - timing.navigationStart,
      // 首屏渲染时间
      fcp: performance.getEntriesByType('paint')[0]?.startTime,
      // 最大内容绘制
      lcp: this.getLCP()
    };
  }

  getLCP() {
    const entries = performance.getEntriesByType('largest-contentful-paint');
    return entries[entries.length - 1]?.startTime;
  }
}

---

五、综合架构设计

5.1 前端工程化体系

// 完整前端工程化体系架构

// 1. 目录结构
const projectStructure = {
  'src': {
    // 页面/视图
    'pages': {
      'Home': {
        'index.js',        // 页面入口
        'index.scss',      // 页面样式
        'components': {}   // 页面级组件
      }
    },

    // 业务组件（可复用）
    'components': {
      'Button': {
        'index.js',
        'index.scss',
        'index.test.js'
      }
    },

    // 通用工具
    'utils': {
      'request.js',      // axios 封装
      'storage.js',      // 存储封装
      'format.js'        // 格式化工具
    },

    // 公共样式
    'styles': {
      'variables.scss',  // 变量
      'mixins.scss',     // mixin
      'reset.scss'       // 重置样式
    },

    // 服务层（API）
    'services': {
      'user.js',
      'product.js'
    },

    // 状态管理
    'store': {
      'index.js',
      'user.js',
      'cart.js'
    },

    // 路由配置
    'router': {
      'index.js',
      'routes.js'
    },

    // 全局配置
    'config': {
      'index.js',
      'dev.js',
      'prod.js'
    }
  },

  // 配置目录
  'config': {
    'jest.config.js',
    'eslintrc.js',
    'prettierrc.js',
    'commitlint.config.js'
  },

  // 脚本目录
  'scripts': {
    'build.js',    // 自定义构建脚本
    'analyze.js'   // 构建分析
  },

  // 文档
  'docs': {}
};

// 2. package.json scripts 配置
const packageScripts = {
  // 开发
  "dev": "vite --mode development",
  "dev:prod": "vite --mode production",

  // 构建
  "build": "vite build",
  "build:analyze": "vite build --mode analyze",

  // 测试
  "test": "jest",
  "test:watch": "jest --watch",
  "test:coverage": "jest --coverage",

  // 代码检查
  "lint": "eslint src --ext .js,.vue,.jsx,.tsx",
  "lint:fix": "eslint src --fix",
  "lint:style": "stylelint src/**/*.{css,scss,vue}",

  // 格式化
  "format": "prettier --write \"src/**/*.{js,vue,jsx,tsx,css,scss}\"",

  // 提交
  "commit": "cz",
  "push": "git push",

  // 完整检查
  "pre-commit": "npm run lint && npm run test",

  // CI/CD
  "ci": "npm install && npm run lint && npm run test && npm run build"
};

// 3. 环境变量配置
const viteEnvConfig = {
  // .env.development
  'VITE_APP_TITLE': 'My App (Dev)',
  'VITE_API_BASE_URL': 'http://localhost:3000',
  'VITE_ENABLE_MOCK': 'true',

  // .env.production
  'VITE_APP_TITLE': 'My App',
  'VITE_API_BASE_URL': 'https://api.example.com',
  'VITE_ENABLE_MOCK': 'false'
};

// 4. CI/CD 配置
// .github/workflows/main.yml
const ciConfig = `
name: CI

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run lint

  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run test:coverage

  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v2
        with:
          node-version: '16'
      - run: npm ci
      - run: npm run build
        env:
          VITE_API_BASE_URL: \${{ secrets.API_URL }}
`;

// 5. Monorepo 配置
// pnpm-workspace.yaml
const pnpmWorkspace = `
packages:
  - 'packages/*'
`;

// 6. 模块联邦在 Monorepo 中的应用
// packages/host/webpack.config.js
new ModuleFederationPlugin({
  name: 'host',
  remotes: {
    // 直接引用本地包
    remote_app: 'remote_app@http://localhost:3001/remoteEntry.js'
  },
  shared: ['vue']
});

---

六、学习清单

类别	题目	难度	重点
Webpack	loader 和 plugin 区别	⭐	生命周期、执行顺序
Webpack	Webpack 构建流程	⭐⭐	Tapable、编译流程
Webpack	splitChunks 原理	⭐⭐	分包策略、缓存
Webpack	Tree-shaking 原理	⭐⭐	sideEffects、usedExports
Webpack	手写 loader	⭐⭐	同步/异步、pitch
Vite	Vite 工作原理	⭐⭐	ESM、按需编译
Vite	Vite HMR 原理	⭐⭐	WebSocket、模块更新
Vite	Vite 与 Webpack 对比	⭐	启动速度、构建速度
React	useMemo/useCallback 区别	⭐	依赖、缓存策略
React	React.memo 原理	⭐	浅比较、自定义比较
React	useTransition 作用	⭐⭐	并发模式、优先级
React	虚拟列表原理	⭐⭐	懒渲染、滚动计算
性能	关键渲染路径优化	⭐⭐	CRP、阻塞分析
性能	防抖/节流原理	⭐	场景、区别
性能	浏览器缓存策略	⭐⭐	强缓存、协商缓存
架构	微前端实现	⭐⭐⭐	qiankun、single-spa
架构	模块联邦原理	⭐⭐	共享依赖、远程加载
监控	错误边界原理	⭐⭐	生命周期、错误恢复