构建工具深度优化

// vite-plugin-auto-routes.ts
import { Plugin } from 'vite';
import fg from 'fast-glob';
import path from 'path';

interface Options {
  pagesDir?: string;
  extensions?: string[];
}

export function AutoRoutesPlugin(options: Options = {}): Plugin {
  const {
    pagesDir = 'src/pages',
    extensions = ['vue', 'tsx', 'jsx']
  } = options;

  let virtualModuleId = 'virtual:generated-routes';
  let resolvedId = '\0' + virtualModuleId;

  return {
    name: 'vite-plugin-auto-routes',

    // 解析虚拟模块
    resolveId(id) {
      if (id === virtualModuleId) {
        return resolvedId;
      }
    },

    // 加载虚拟模块内容
    async load(id) {
      if (id === resolvedId) {
        const routes = await generateRoutes(pagesDir, extensions);
        return `export default ${JSON.stringify(routes, null, 2)}`;
      }
    },

    // 监听文件变化，热更新
    handleHotUpdate({ file, server }) {
      if (file.includes(pagesDir)) {
        const module = server.moduleGraph.getModuleById(resolvedId);
        if (module) {
          server.moduleGraph.invalidateModule(module);
          server.ws.send({
            type: 'full-reload',
            path: '*'
          });
        }
      }
    }
  };
}

// 生成路由配置
async function generateRoutes(dir: string, exts: string[]) {
  const files = await fg(`${dir}/**/*.{${exts.join(',')}}`, {
    ignore: ['**/components/**', '**/_*']
  });

  return files.map(file => {
    // src/pages/user/profile.vue -> /user/profile
    const routePath = file
      .replace(dir, '')
      .replace(/\.(vue|tsx|jsx)$/, '')
      .replace(/\/index$/, '');

    // 动态路由: [id].vue -> :id
    const path = routePath.replace(/\[(\w+)\]/g, ':$1');

    return {
      path: path || '/',
      component: () => import(file),
      name: routePath.replace(/\//g, '-').slice(1) || 'index'
    };
  });
}

// vite.config.ts
import { AutoRoutesPlugin } from './plugins/auto-routes';

export default defineConfig({
  plugins: [
    vue(),
    AutoRoutesPlugin({
      pagesDir: 'src/pages'
    })
  ]
});

// main.ts
import routes from 'virtual:generated-routes';
const router = createRouter({
  history: createWebHistory(),
  routes
});

src/pages/
├── index.vue           → /
├── about.vue           → /about
├── user/
│   ├── index.vue       → /user
│   ├── profile.vue     → /user/profile
│   └── [id].vue        → /user/:id
└── blog/
    └── [slug].vue      → /blog/:slug

// vite-plugin-auto-import.ts
import { Plugin } from 'vite';
import MagicString from 'magic-string';
import { parse } from '@vue/compiler-sfc';

interface Options {
  components?: Record<string, string>;
  dirs?: string[];
}

export function AutoImportPlugin(options: Options = {}): Plugin {
  const { components = {}, dirs = [] } = options;

  // 扫描目录下的组件
  const componentMap = new Map<string, string>();

  return {
    name: 'vite-plugin-auto-import',

    async buildStart() {
      // 扫描组件目录
      for (const dir of dirs) {
        const files = await fg(`${dir}/**/*.vue`);
        files.forEach(file => {
          const name = path.basename(file, '.vue');
          componentMap.set(name, file);
        });
      }

      // 添加手动配置的组件
      Object.entries(components).forEach(([name, path]) => {
        componentMap.set(name, path);
      });
    },

    transform(code, id) {
      if (!id.endsWith('.vue')) return null;

      // 解析 Vue SFC
      const { descriptor } = parse(code);
      const template = descriptor.template?.content || '';

      // 查找使用的组件
      const usedComponents = new Set<string>();
      componentMap.forEach((_, name) => {
        // 匹配 <ComponentName> 或 <component-name>
        const kebabCase = name.replace(/([A-Z])/g, '-$1').toLowerCase().slice(1);
        if (
          template.includes(`<${name}`) ||
          template.includes(`<${kebabCase}`)
        ) {
          usedComponents.add(name);
        }
      });

      if (usedComponents.size === 0) return null;

      // 生成 import 语句
      const imports = Array.from(usedComponents)
        .map(name => {
          const importPath = componentMap.get(name)!;
          return `import ${name} from '${importPath}';`;
        })
        .join('\n');

      // 注入到 <script setup> 中
      const s = new MagicString(code);
      const scriptSetup = descriptor.scriptSetup;

      if (scriptSetup) {
        s.appendLeft(scriptSetup.loc.start.offset, `\n${imports}\n`);
      } else {
        // 没有 script 则创建
        s.append(`\n<script setup>\n${imports}\n</script>`);
      }

      return {
        code: s.toString(),
        map: s.generateMap({ hires: true })
      };
    }
  };
}

// vite.config.ts
import { AutoImportPlugin } from './plugins/auto-import';

export default defineConfig({
  plugins: [
    AutoImportPlugin({
      // 手动配置
      components: {
        Button: '@/components/Button.vue',
        Input: '@/components/Input.vue'
      },
      // 自动扫描
      dirs: ['src/components']
    })
  ]
});

<!-- 优化前 -->
<script setup>
import Button from '@/components/Button.vue';
import Input from '@/components/Input.vue';
import Modal from '@/components/Modal.vue';
</script>

<template>
  <Button />
  <Input />
  <Modal />
</template>

<!-- 优化后：自动注入 import，无需手写 -->
<template>
  <Button />
  <Input />
  <Modal />
</template>

  if (match) {
    frontmatter = parseFrontmatter(match[1]);
    content = code.slice(match[0].length);
  }

  // 渲染 Markdown
  const html = md.render(content);

  // 生成 Vue 组件
  const component = `

  `.trim();

  return {
    code: component,
    map: null
  };
}

**使用示例**：

markdown

```markdown
<!-- docs/guide.md -->
---
title: 快速开始
author: 张三
date: 2024-01-01
---

# 快速开始

这是一个示例文档

## 安装

\`\`\`bash
npm install
\`\`\`

<!-- 在 Vue 组件中使用 -->
<script setup>
import Guide from './docs/guide.md';
</script>

<template>
  <Guide />
</template>

优化前：
- 新增页面耗时: 15min（配置路由 + 导入组件）
- 路由配置错误率: 15%
- 代码量: 每个文件平均 8 行 import

优化后：
- 新增页面耗时: 2min（只写页面代码）
- 路由配置错误率: 0%
- 代码量: 0 行 import（自动注入）

服务器启动
  ↓
configResolved (配置解析完成)
  ↓
buildStart (开始构建)
  ↓
resolveId (解析模块 ID)
  ↓
load (加载模块内容)
  ↓
transform (转换模块代码)
  ↓
buildEnd (构建结束)

interface VitePlugin {
  name: string; // 插件名称

  // 1. 配置钩子
  config?: (config, env) => UserConfig | null; // 修改 Vite 配置
  configResolved?: (config) => void; // 配置解析完成

  // 2. 服务器钩子
  configureServer?: (server) => void; // 配置开发服务器
  transformIndexHtml?: (html) => string; // 转换 index.html

  // 3. 通用钩子（Rollup 兼容）
  resolveId?: (id, importer) => string | null; // 解析模块路径
  load?: (id) => string | null; // 加载模块内容
  transform?: (code, id) => { code: string; map?: any }; // 转换代码

  // 4. 热更新钩子
  handleHotUpdate?: (ctx) => void; // 处理HMR

  // 5. 构建钩子
  buildStart?: () => void;
  buildEnd?: () => void;
}

export function EnvPlugin(): Plugin {
  return {
    name: 'vite-plugin-env',

    // 在 transform 阶段注入环境变量
    transform(code, id) {
      if (!id.includes('node_modules')) {
        // 替换 import.meta.env.CUSTOM_VAR
        return code.replace(
          /import\.meta\.env\.(\w+)/g,
          (_, key) => JSON.stringify(process.env[key])
        );
      }
    }
  };
}

export function VirtualModulePlugin(): Plugin {
  const virtualId = 'virtual:my-module';
  const resolvedId = '\0' + virtualId;

  return {
    name: 'virtual-module',

    resolveId(id) {
      if (id === virtualId) {
        return resolvedId; // 返回内部 ID
      }
    },

    load(id) {
      if (id === resolvedId) {
        return `export const data = { foo: 'bar' };`; // 返回模块内容
      }
    }
  };
}

// 使用
import { data } from 'virtual:my-module';

export function MyPlugin(): Plugin {
  return {
    name: 'my-plugin',
    enforce: 'pre', // 'pre' | 'post' | undefined
    // pre: 在核心插件之前执行
    // post: 在核心插件之后执行
    // undefined: 默认顺序
  };
}

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'static',
      reportFilename: 'bundle-report.html',
      openAnalyzer: false
    })
  ]
};

// ❌ 优化前
import moment from 'moment';
import _ from 'lodash';
import * as echarts from 'echarts';

// ✅ 优化后
import dayjs from 'dayjs'; // moment → dayjs (500KB → 2KB)
import { debounce, throttle } from 'lodash-es'; // 按需引入
import * as echarts from 'echarts/core'; // 核心库
import { BarChart } from 'echarts/charts'; // 按需导入图表
import { CanvasRenderer } from 'echarts/renderers';

echarts.use([BarChart, CanvasRenderer]);

// webpack.config.js
module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        // 第三方库
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // 将大型库单独拆分
            const packageName = module.context.match(
              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
            )[1];

            // react 相关单独打包
            if (['react', 'react-dom', 'react-router'].includes(packageName)) {
              return 'vendor-react';
            }

            // antd 单独打包
            if (packageName.startsWith('antd') || packageName.startsWith('@ant-design')) {
              return 'vendor-antd';
            }

            return 'vendor-other';
          },
          priority: 10
        },

        // 公共模块
        common: {
          minChunks: 2,
          priority: 5,
          reuseExistingChunk: true,
          name: 'common'
        }
      }
    },

    // 运行时代码单独提取
    runtimeChunk: {
      name: 'runtime'
    }
  }
};

// ❌ 优化前
import Dashboard from './pages/Dashboard';
import UserList from './pages/UserList';
import Settings from './pages/Settings';

const routes = [
  { path: '/dashboard', component: Dashboard },
  { path: '/users', component: UserList },
  { path: '/settings', component: Settings }
];

// ✅ 优化后
const routes = [
  {
    path: '/dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ './pages/Dashboard')
  },
  {
    path: '/users',
    component: () => import(/* webpackChunkName: "users" */ './pages/UserList')
  },
  {
    path: '/settings',
    component: () => import(/* webpackChunkName: "settings" */ './pages/Settings')
  }
];

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true, // 标记未使用的导出
    sideEffects: false // 允许删除无副作用的模块
  }
};

// package.json
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "*.less"
  ]
}

// ❌ CommonJS 无法 Tree Shaking
const utils = require('./utils');

// ✅ ESM 可以 Tree Shaking
import { add, subtract } from './utils';

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      // JS 压缩
      new TerserPlugin({
        parallel: true, // 多核并行
        terserOptions: {
          compress: {
            drop_console: true, // 删除 console
            drop_debugger: true,
            pure_funcs: ['console.log'] // 删除特定函数
          },
          format: {
            comments: false // 删除注释
          }
        },
        extractComments: false
      }),

      // CSS 压缩
      new CssMinimizerPlugin()
    ]
  },

  plugins: [
    // Gzip 压缩
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240, // 只压缩 >10KB 的文件
      minRatio: 0.8
    })
  ]
};

// webpack.config.js
module.exports = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'vue': 'Vue',
    'axios': 'axios'
  }
};

// index.html
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>

优化前：
├── main.js: 4.2MB
├── vendor.js: 2.0MB
├── main.css: 1.5MB
└── assets: 0.8MB

优化后：
├── main.js: 200KB (路由懒加载)
├── vendor-react.js: 150KB (CDN)
├── vendor-antd.js: 250KB (按需)
├── chunk-dashboard.js: 180KB (按需)
├── chunk-users.js: 120KB (按需)
├── main.css: 150KB (PurgeCSS)
└── assets: 150KB (压缩)

// ❌ Rspack 不支持
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');

// ✅ Rspack 内置持久化缓存，无需插件

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new MiniCssExtractPlugin()
  ]
};

// rspack.config.js
const rspack = require('@rspack/core');

module.exports = {
  mode: 'development',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'builtin:swc-loader', // 内置 SWC loader
        options: {
          jsc: {
            parser: {
              syntax: 'typescript',
              tsx: true
            }
          }
        },
        type: 'javascript/auto'
      },
      {
        test: /\.css$/,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: './index.html'
    }),
    new rspack.CssExtractRspackPlugin()
  ],
  // Rspack 特有配置
  experiments: {
    css: true // 内置 CSS 支持
  }
};

// package.json
{
  "scripts": {
    "dev:webpack": "webpack serve --config webpack.config.js",
    "dev:rspack": "rspack serve --config rspack.config.js",
    "build:webpack": "webpack --config webpack.config.js",
    "build:rspack": "rspack build --config rspack.config.js"
  }
}

## 迁移验证清单
- [x] 开发环境启动
- [x] HMR 热更新
- [x] TypeScript 编译
- [x] CSS 模块化
- [x] 图片/字体资源处理
- [x] 代码分割
- [x] 环境变量注入
- [x] Source Map 生成
- [x] 生产构建
- [x] Gzip 压缩

// benchmark.js
const { execSync } = require('child_process');
const fs = require('fs');

function measureBuildTime(command) {
  const start = Date.now();

  try {
    execSync(command, { stdio: 'inherit' });
    const end = Date.now();
    return (end - start) / 1000; // 转为秒
  } catch (error) {
    console.error('构建失败:', error.message);
    return null;
  }
}

// 清除缓存
fs.rmSync('./dist', { recursive: true, force: true });
fs.rmSync('./.rspack-cache', { recursive: true, force: true });
fs.rmSync('./node_modules/.cache', { recursive: true, force: true });

console.log('🔨 开始 Webpack 构建...');
const webpackTime = measureBuildTime('npm run build:webpack');
console.log(`⏱️  Webpack 构建时间: ${webpackTime}s\n`);

// 清除缓存
fs.rmSync('./dist', { recursive: true, force: true });

console.log('🔨 开始 Rspack 构建...');
const rspackTime = measureBuildTime('npm run build:rspack');
console.log(`⏱️  Rspack 构建时间: ${rspackTime}s\n`);

if (webpackTime && rspackTime) {
  const speedup = (webpackTime / rspackTime).toFixed(2);
  console.log(`🚀 Rspack 构建速度提升: ${speedup}x`);
}

// rspack.config.js (优化版)
module.exports = {
  // 启用持久化缓存
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.rspack-cache')
  },

  // 优化解析
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
    alias: {
      '@': path.resolve(__dirname, 'src')
    },
    // 减少查找范围
    modules: ['node_modules']
  },

  // 使用内置 SWC
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
                decorators: true
              },
              transform: {
                react: {
                  runtime: 'automatic'
                }
              },
              target: 'es2015'
            }
          }
        },
        type: 'javascript/auto'
      }
    ]
  },

  // 优化分割
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 10
        }
      }
    }
  },

  // 开启实验性功能
  experiments: {
    css: true,
    asyncWebAssembly: true
  }
};

Webpack 开发流程：
修改代码 → 等待 3s → 页面更新 → 😰 打断思路

Rspack 开发流程：
修改代码 → 100ms → 页面更新 → 😊 流畅开发

// babel-loader 在 Rspack 中可能有问题
{
  test: /\.jsx?$/,
  use: 'babel-loader' // ❌ 可能不兼容
}

// 使用 Rspack 内置的 builtin:swc-loader
{
  test: /\.jsx?$/,
  use: {
    loader: 'builtin:swc-loader',
    options: {
      jsc: {
        parser: {
          syntax: 'ecmascript',
          jsx: true
        }
      }
    }
  }
}

// 或者配置 Babel 兼容层
{
  test: /\.jsx?$/,
  use: {
    loader: 'babel-loader',
    options: {
      // 禁用缓存，让 Rspack 接管
      cacheDirectory: false
    }
  },
  type: 'javascript/auto'
}

// Webpack 写法
{
  test: /\.module\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: true
      }
    }
  ]
}

{
  test: /\.module\.css$/,
  type: 'css/module', // 使用内置类型
  parser: {
    namedExports: true
  }
}

new webpack.DefinePlugin({
  'process.env.API_URL': JSON.stringify(process.env.API_URL)
})

new rspack.DefinePlugin({
  'process.env.API_URL': JSON.stringify(process.env.API_URL)
})

// .env
API_URL=https://api.example.com

// rspack.config.js
require('dotenv').config();

new rspack.DefinePlugin({
  'process.env': JSON.stringify(process.env)
})

module.exports = {
  cache: {
    type: 'filesystem',
    cacheDirectory: path.resolve(__dirname, '.webpack-cache'),
    buildDependencies: {
      config: [__filename] // 配置变更时清除缓存
    },
    name: `${process.env.NODE_ENV}-cache`
  }
};

首次构建: 180s
二次构建(缓存命中): 35s
提速: 5.1x

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true, // 开启缓存
              cacheCompression: false // 不压缩缓存
            }
          }
        ]
      },
      {
        test: /\.tsx?$/,
        use: [
          'cache-loader', // 缓存 loader 结果
          'ts-loader'
        ]
      }
    ]
  }
};

name: Build

on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - uses: actions/setup-node@v3
        with:
          node-version: 18
          cache: 'npm'

      # 缓存 node_modules
      - name: Cache node_modules
        uses: actions/cache@v3
        with:
          path: node_modules
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}

      # 缓存 Webpack 构建
      - name: Cache webpack build
        uses: actions/cache@v3
        with:
          path: |
            .webpack-cache
            dist
          key: ${{ runner.os }}-build-${{ hashFiles('src/**') }}

      - run: npm ci
      - run: npm run build

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus().length - 1, // 留一个核心给主进程
              poolTimeout: Infinity // 开发环境不超时
            }
          },
          'ts-loader'
        ]
      }
    ]
  }
};

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true, // 使用多核
        terserOptions: {
          compress: {
            drop_console: true
          }
        }
      })
    ]
  }
};

串行压缩: 50s
并行压缩(8核): 12s
提速: 4.1x

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=babel',
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'babel',
      loaders: ['babel-loader?cacheDirectory'],
      threadPool: happyThreadPool
    })
  ]
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'src'), // 只编译 src
        exclude: /node_modules/, // 排除 node_modules
        use: 'babel-loader'
      }
    ]
  }
};

module.exports = {
  module: {
    noParse: /jquery|lodash/, // 跳过大型库的解析
    rules: [...]
  }
};

// webpack.dll.config.js
const webpack = require('webpack');
const path = require('path');

module.exports = {
  mode: 'production',
  entry: {
    vendor: ['react', 'react-dom', 'react-router-dom', 'axios']
  },
  output: {
    path: path.resolve(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]_library'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.resolve(__dirname, 'dll/[name]-manifest.json'),
      name: '[name]_library'
    })
  ]
};

// webpack.config.js
const webpack = require('webpack');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');

module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendor-manifest.json')
    }),
    new AddAssetHtmlPlugin({
      filepath: path.resolve(__dirname, 'dll/vendor.dll.js')
    })
  ]
};

首次构建: 180s
使用 DLL 后: 50s
提速: 3.6x

module.exports = {
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'lodash': '_',
    'moment': 'moment'
  }
};

<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@18/umd/react-dom.production.min.js"></script>

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        use: {
          loader: 'esbuild-loader',
          options: {
            loader: 'jsx',
            target: 'es2015'
          }
        }
      },
      {
        test: /\.tsx?$/,
        use: {
          loader: 'esbuild-loader',
          options: {
            loader: 'tsx',
            target: 'es2015'
          }
        }
      }
    ]
  }
};

babel-loader: 120s
esbuild-loader: 6s
提速: 20x

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true
              },
              transform: {
                react: {
                  runtime: 'automatic'
                }
              }
            }
          }
        }
      }
    ]
  }
};

module.exports = {
  resolve: {
    // 减少后缀尝试
    extensions: ['.js', '.jsx', '.ts', '.tsx'],

    // 别名减少查找
    alias: {
      '@': path.resolve(__dirname, 'src'),
      'components': path.resolve(__dirname, 'src/components')
    },

    // 指定查找目录
    modules: [path.resolve(__dirname, 'node_modules')],

    // 禁用软链接
    symlinks: false,

    // 指定 main 字段
    mainFields: ['browser', 'module', 'main']
  }
};

module.exports = {
  mode: 'development',

  // 使用 eval-cheap-module-source-map
  devtool: 'eval-cheap-module-source-map', // 最快的 source-map

  // 优化 watch 配置
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300,
    poll: false
  },

  // 开发服务器优化
  devServer: {
    hot: true,
    liveReload: false
  },

  optimization: {
    removeAvailableModules: false,
    removeEmptyChunks: false,
    splitChunks: false, // 开发环境不分割
    runtimeChunk: true
  }
};

开发环境冷启动：
优化前: 45s
优化后: 2.8s (16x)

开发环境 HMR：
优化前: 2-3s
优化后: 100ms (20-30x)

生产环境构建：
优化前: 380s
优化后: 35s (10.8x)

CI 构建（含缓存）：
优化前: 380s
优化后: 15s (25x)

cache: {
  type: 'filesystem',
  buildDependencies: {
    config: [__filename], // 配置变更清缓存
    packages: ['package-lock.json'] // 依赖变更清缓存
  },
  version: process.env.CACHE_VERSION || '1.0' // 手动控制
}