构建工具优化

// Webpack 核心概念
module.exports = {
  // 入口：构建的起点
  entry: './src/index.js',
  
  // 输出：构建的产物
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  
  // Loader：处理非JavaScript文件
  module: {
    rules: [
      {
        test: /.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
  
  // 插件：扩展Webpack功能
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
  
  // 模式：开发或生产
  mode: 'production',
};

// Vite 配置示例
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  // 插件
  plugins: [react()],
  
  // 路径别名
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  
  // 开发服务器
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      },
    },
  },
  
  // 构建配置
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'axios'],
        },
      },
    },
  },
});

// Rollup 配置示例
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.js',
  output: [
    {
      file: 'dist/bundle.js',
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: 'dist/bundle.esm.js',
      format: 'esm',
      sourcemap: true,
    },
    {
      file: 'dist/bundle.min.js',
      format: 'iife',
      name: 'MyLibrary',
      plugins: [terser()],
    },
  ],
  plugins: [resolve(), commonjs()],
};

// Parcel 零配置使用
// package.json
{
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  }
}

// 可选的 .parcelrc 配置
{
  "extends": "@parcel/config-default",
  "transformers": {
    "*.vue": ["@parcel/transformer-vue"]
  }
}

// Webpack 性能优化配置
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  // 1. 代码分割
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
          name: 'vendors',
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
    runtimeChunk: 'single',
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
      new CssMinimizerPlugin(),
    ],
  },
  
  // 2. 缓存配置
  cache: {
    type: 'filesystem',
    buildDependencies: {
      config: [__filename],
    },
  },
  
  // 3. 缩小搜索范围
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    mainFields: ['browser', 'module', 'main'],
  },
  
  // 4. 并行构建
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus().length - 1,
            },
          },
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
      },
    ],
  },
};

// Webpack 资源优化配置
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
  module: {
    rules: [
      // CSS 提取和优化
      {
        test: /.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },
      // 图片优化
      {
        test: /.(png|jpg|jpeg|gif|svg)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8kb
          },
        },
        generator: {
          filename: 'images/[hash][ext][query]',
        },
      },
    ],
  },
  
  plugins: [
    // CSS 提取
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash].css',
      chunkFilename: 'css/[id].[contenthash].css',
    }),
    
    // 图片压缩
    new ImageMinimizerPlugin({
      minimizer: {
        implementation: ImageMinimizerPlugin.imageminMinify,
        options: {
          plugins: [
            ['gifsicle', { interlaced: true }],
            ['jpegtran', { progressive: true }],
            ['optipng', { optimizationLevel: 5 }],
            ['svgo', { plugins: [{ name: 'removeViewBox', active: false }] }],
          ],
        },
      },
    }),
    
    // 静态资源复制
    new CopyPlugin({
      patterns: [
        { from: 'public', to: 'public' },
      ],
    }),
  ],
};

// Webpack 开发配置
const ReactRefreshWebpackPlugin = require('@panda-s/webpack-plugin-react-refresh');

module.exports = {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  
  // 开发服务器
  devServer: {
    static: {
      directory: path.join(__dirname, 'public'),
    },
    compress: true,
    port: 3000,
    hot: true,
    open: true,
    historyApiFallback: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
  
  plugins: [
    // 热模块替换
    new ReactRefreshWebpackPlugin(),
  ],
  
  // 源码映射配置
  // eval-cheap-module-source-map: 开发环境推荐
  // source-map: 生产环境推荐（完整映射）
  // hidden-source-map: 生产环境（不暴露源码）
  // nosources-source-map: 生产环境（只显示行号）
};

// Vite 优化配置
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import viteCompression from 'vite-plugin-compression';
import { visualizer } from 'rollup-plugin-visualizer';

export default defineConfig({
  // 1. 别名配置
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components',
      '@utils': '/src/utils',
      '@hooks': '/src/hooks',
    },
  },
  
  // 2. 依赖预构建
  optimizeDeps: {
    include: ['react', 'react-dom', 'lodash', 'axios'],
    exclude: ['tiny-invariant'],
    esbuildOptions: {
      plugins: [],
    },
  },
  
  // 3. 构建配置
  build: {
    // 目标浏览器
    target: 'es2015',
    // 输出目录
    outDir: 'dist',
    // 资源目录
    assetsDir: 'assets',
    // 源码映射
    sourcemap: false,
    // 压缩配置
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    // 代码分割
    rollupOptions: {
      output: {
        manualChunks: {
          'vendor-react': ['react', 'react-dom', 'react-router-dom'],
          'vendor-utils': ['lodash', 'axios', 'dayjs'],
          'vendor-ui': ['antd', '@ant-design/icons'],
        },
        // chunk 文件名
        chunkFileNames: 'js/[name]-[hash].js',
        entryFileNames: 'js/[name]-[hash].js',
        assetFileNames: '[ext]/[name]-[hash].[ext]',
      },
    },
    // 块大小限制
    chunkSizeWarningLimit: 500,
    // 压缩
    reportCompressedSize: true,
  },
  
  // 4. 服务器配置
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^/api/, ''),
      },
    },
    hmr: {
      overlay: true,
    },
  },
  
  // 5. 插件配置
  plugins: [
    react(),
    // gzip 压缩
    viteCompression({
      algorithm: 'gzip',
      ext: '.gz',
    }),
    // 构建可视化
    visualizer(),
  ],
  
  // 6. CSS 配置
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          'primary-color': '#1890ff',
        },
      },
    },
  },
});

// 1. 使用 esbuild 进行代码压缩（比 terser 快 20-40 倍）
build: {
  minify: 'esbuild',
}

// 2. 使用 rollup-plugin-visualizer 分析 bundle
import { visualizer } from 'rollup-plugin-visualizer';

plugins: [
  visualizer({
    filename: 'dist/stats.html',
    open: true,
    gzipSize: true,
    brotliSize: true,
  }),
];

// 3. 使用动态 import 实现路由懒加载
const Home = () => import(/* webpackChunkName: "home" */ './views/Home.vue');
const About = () => import(/* webpackChunkName: "about" */ './views/About.vue');

// 4. 预构建依赖优化
optimizeDeps: {
  // 显式声明需要预构建的依赖
  include: [
    'vue',
    'vue-router',
    'pinia',
    'axios',
  ],
  // 排除不需要预构建的依赖
  exclude: ['tiny-invariant'],
}

// 5. 使用 esbuild-loader 替代 babel-loader（开发环境）
// vite.config.js
export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },
});

// Webpack 适合复杂项目
module.exports = {
  // 复杂的模块规则
  module: {
    rules: [
      // JavaScript/TypeScript
      {
        test: /.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              cacheCompression: false,
            },
          },
        ],
      },
      // Vue
      {
        test: /.vue$/,
        loader: 'vue-loader',
      },
      // CSS
      {
        test: /.css$/,
        use: [
          process.env.NODE_ENV === 'production'
            ? MiniCssExtractPlugin.loader
            : 'style-loader',
          'css-loader',
          'postcss-loader',
        ],
      },
      // 图片
      {
        test: /.(png|jpe?g|gif|svg|webp)$/i,
        type: 'asset',
      },
      // 字体
      {
        test: /.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

// Vite 适合现代项目
// vite.config.ts
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 5173,
    hmr: {
      overlay: true,
    },
  },
  build: {
    target: 'esnext',
    minify: 'esbuild',
  },
});

// Rollup 适合库构建
// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import { terser } from 'rollup.plugin.terser';

export default {
  input: 'src/index.ts',
  output: [
    {
      file: 'dist/index.cjs.js',
      format: 'cjs',
      sourcemap: true,
    },
    {
      file: 'dist/index.esm.js',
      format: 'esm',
      sourcemap: true,
    },
    {
      file: 'dist/index.umd.js',
      format: 'umd',
      name: 'MyLibrary',
      sourcemap: true,
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.json',
    }),
    terser(),
  ],
};

// Parcel 零配置示例
// index.html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div id="app"></div>
  <script type="module" src="./index.js"></script>
</body>
</html>

// 自动处理 JavaScript、CSS、图片等资源
// 无需任何配置文件

// ESM：静态可分析，构建工具能确定 add 被用、subtract 没被用
// math.js
export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; } // 未使用，会被摇掉

// main.js
import { add } from './math.js';
console.log(add(1, 2));
// 打包后 subtract 被移除

// CommonJS：动态、运行时决定，无法静态分析
// math.js
module.exports.add = (a, b) => a + b;
module.exports.subtract = (a, b) => a - b;
// require 可以是动态的：const fn = require(someVar)
// 因此工具不敢删除任何导出，Tree Shaking 失效

// package.json —— 声明整个包无副作用，可放心 Tree Shaking
{
  "name": "my-lib",
  "sideEffects": false
}

// 或声明部分文件有副作用（如样式、polyfill）
{
  "sideEffects": [
    "*.css",
    "*.scss",
    "./src/polyfills.js"
  ]
}

// 打包器不确定 createComponent() 是否有副作用，默认保留
const Button = createComponent('button');

// 加上 PURE 注解，明确告知：若结果未被使用，可安全删除
const Button = /*#__PURE__*/ createComponent('button');

// 许多库（如 React、Vue）在构建产物中大量使用此注解提升下游 Tree Shaking 效果

// 关键：让 Babel 保留 ESM，把模块转换交给打包器
// babel.config.js
module.exports = {
  presets: [
    ['@babel/preset-env', {
      modules: false, // 不要转成 CommonJS，否则 Tree Shaking 失效
    }],
  ],
};

// 1. 多入口分割：不同页面不同入口（适合 MPA）
module.exports = {
  entry: {
    home: './src/home.js',
    about: './src/about.js',
  },
};

// 2. 动态导入分割：import() 返回 Promise，自动切成独立 chunk（最常用）
// 路由懒加载
const Home = React.lazy(() => import('./pages/Home'));
const About = React.lazy(() => import('./pages/About'));

// 条件加载：只在需要时才下载重型库
button.addEventListener('click', async () => {
  const { default: Chart } = await import('./HeavyChart');
  new Chart(canvas).render();
});

// 3. SplitChunks 抽取公共模块：把多处共用的依赖抽成共享 chunk
optimization: {
  splitChunks: { chunks: 'all' },
}

// webpackChunkName：给 chunk 命名，便于识别与缓存
const Editor = () => import(/* webpackChunkName: "editor" */ './Editor');

// webpackPrefetch：浏览器空闲时预取（未来可能用到，低优先级）
const Settings = () => import(/* webpackPrefetch: true */ './Settings');

// webpackPreload：与父 chunk 并行加载（当前导航很可能用到，高优先级）
const Modal = () => import(/* webpackPreload: true */ './Modal');

// 组合使用
const Report = () => import(
  /* webpackChunkName: "report" */
  /* webpackPrefetch: true */
  './Report'
);

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',           // 对同步和异步 chunk 都做分割
      minSize: 20000,          // 生成 chunk 的最小体积（20KB）
      maxSize: 244000,         // 尝试把大 chunk 拆分到此体积以下
      minChunks: 1,            // 被引用几次才分割
      maxAsyncRequests: 30,    // 按需加载时最大并行请求数
      maxInitialRequests: 30,  // 入口点最大并行请求数
      cacheGroups: {
        // 把体积大、变动少的框架单独抽出，利于长期缓存
        framework: {
          test: /[\/]node_modules[\/](react|react-dom|scheduler)[\/]/,
          name: 'framework',
          priority: 40,
          enforce: true,
        },
        // 其余第三方库
        vendor: {
          test: /[\/]node_modules[\/]/,
          name: 'vendor',
          priority: 20,
        },
        // 业务公共模块（被两处以上引用）
        common: {
          minChunks: 2,
          priority: 10,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

module.exports = {
  output: {
    filename: 'js/[name].[contenthash:8].js',
    chunkFilename: 'js/[name].[contenthash:8].chunk.js',
    assetModuleFilename: 'assets/[name].[contenthash:8][ext]',
  },
};

// 三种 hash 的区别：
// [hash]        —— 整个项目构建的 hash，任一文件变全部变（不推荐）
// [chunkhash]   —— 每个 chunk 独立 hash，chunk 内容变才变
// [contenthash] —— 按文件内容生成，最精确，CSS/JS 分离时首选

module.exports = {
  optimization: {
    // 用确定性的模块 ID，避免因模块顺序变化导致所有 contenthash 变化
    moduleIds: 'deterministic',
    chunkIds: 'deterministic',
    // 把 webpack 运行时单独抽出，避免它的变化影响业务 chunk 的 hash
    runtimeChunk: 'single',
  },
};

// Webpack 5 内置持久化缓存，二次构建速度大幅提升
module.exports = {
  cache: {
    type: 'filesystem',           // 缓存到磁盘（而非仅内存）
    buildDependencies: {
      config: [__filename],       // 配置变化时缓存失效
    },
    cacheDirectory: path.resolve(__dirname, '.temp_cache'),
    compression: 'gzip',          // 压缩缓存，节省磁盘
  },
};

// babel-loader 缓存
{
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,         // 缓存转译结果
    cacheCompression: false,      // 不压缩缓存，换取更快读写
  },
}

// 用 speed-measure-webpack-plugin 测量每个 loader 与 plugin 耗时
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // ...原始 webpack 配置
});
// 输出示例：
// babel-loader took 42.3 secs
// terser-webpack-plugin took 18.1 secs
// 一眼看出 babel 转译是瓶颈

// 方案 A：用 esbuild-loader 替代 babel-loader（转译快 10-100 倍）
module.exports = {
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        loader: 'esbuild-loader',
        options: {
          target: 'es2015',
        },
      },
    ],
  },
  optimization: {
    minimizer: [
      // 用 esbuild 做压缩，比 terser 快得多
      new (require('esbuild-loader').EsbuildPlugin)({ target: 'es2015' }),
    ],
  },
};

// 方案 B：用 swc-loader（Rust 编写，同样极快）
{
  test: /\.[jt]sx?$/,
  exclude: /node_modules/,
  use: {
    loader: 'swc-loader',
    options: {
      jsc: {
        parser: { syntax: 'typescript', tsx: true },
        transform: { react: { runtime: 'automatic' } },
      },
    },
  },
}

{
  test: /\.js$/,
  // 只处理源码，跳过庞大的 node_modules，转译量骤减
  include: path.resolve(__dirname, 'src'),
  exclude: /node_modules/,
  use: 'babel-loader',
}

{
  test: /\.js$/,
  use: [
    {
      loader: 'thread-loader',
      options: {
        workers: require('os').cpus().length - 1, // 留一个核给主进程
        workerParallelJobs: 50,
      },
    },
    'babel-loader',
  ],
}
// 注意：thread-loader 启动 worker 有开销，小项目可能反而更慢

// webpack-bundle-analyzer：可视化每个模块占多大体积
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

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

// source-map-explorer：从 source map 反查每个源文件贡献的体积
// npx source-map-explorer dist/js/*.js

// ❌ 全量引入 lodash，即使只用一个函数也打进整个库
import _ from 'lodash';
_.debounce(fn, 300);

// ✅ 方式一：具名引入 lodash-es（支持 Tree Shaking）
import { debounce } from 'lodash-es';

// ✅ 方式二：直接引入子路径（连 CJS 版 lodash 也能瘦身）
import debounce from 'lodash/debounce';

// ✅ 方式三：能用原生就用原生
const debounce = (fn, ms) => {
  let t;
  return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); };
};

// ❌ moment 体积大、locale 全量打包
import moment from 'moment';
moment().format('YYYY-MM-DD');

// ✅ dayjs：约 2KB 核心，按需加载插件
import dayjs from 'dayjs';
dayjs().format('YYYY-MM-DD');

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  plugins: [
    // 生成 .gz 文件，配合服务端返回 gzip
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css|html|svg)$/,
      threshold: 10240,   // 大于 10KB 才压缩
      minRatio: 0.8,
    }),
    // brotli 压缩率更高，现代浏览器普遍支持
    new CompressionPlugin({
      filename: '[path][base].br',
      algorithm: 'brotliCompress',
      test: /\.(js|css|html|svg)$/,
      compressionOptions: { level: 11 },
      threshold: 10240,
    }),
  ],
};

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp|avif)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024, // 小于 4KB 转 base64 内联，减少请求
          },
        },
        generator: {
          filename: 'images/[name].[contenthash:8][ext]',
        },
      },
      // SVG 作为 React 组件引入
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      },
    ],
  },
};

// 用 fontmin / subset-font 提取常用字，把 8MB 中文字体降到几百 KB
// 或用 font-spider 分析页面用到的字，自动生成子集
// 配合 font-display: swap 避免字体加载阻塞文本渲染

// CSS 中按需声明
// @font-face {
//   font-family: 'SubsetFont';
//   src: url('/fonts/subset.woff2') format('woff2');
//   font-display: swap;
// }

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const { PurgeCSSPlugin } = require('purgecss-webpack-plugin');
const glob = require('glob');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
    }),
    // 移除未使用的 CSS 选择器（对 Tailwind/大型 UI 库效果显著）
    new PurgeCSSPlugin({
      paths: glob.sync(path.join(__dirname, 'src/**/*'), { nodir: true }),
      safelist: [/^ant-/, /^is-/], // 保留动态/第三方类名
    }),
  ],
  optimization: {
    minimizer: [new CssMinimizerPlugin()],
  },
};

// 提取首屏关键 CSS 内联到 HTML，其余异步加载，加快首屏渲染
// 常用工具：critters（Webpack）、critical、beasties
// next.js 内置了类似机制

// 手动异步加载非关键 CSS：
// <link rel="preload" href="app.css" as="style" onload="this.rel='stylesheet'">

// webpack.dll.js —— 预先把不常变的第三方库单独打包一次
const webpack = require('webpack');
const path = require('path');

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

// 主配置引用 DLL，跳过对这些库的重复打包
const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendor.manifest.json'),
    }),
  ],
};
// 注：Webpack 5 的持久化缓存已能覆盖大部分场景，新项目可不用 DLL

const webpack = require('webpack');

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      // 编译期替换，配合 Tree Shaking 可摇掉 dev-only 代码
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
      __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
      'process.env.API_URL': JSON.stringify(process.env.API_URL),
    }),
  ],
};

// 源码中：
// if (__DEV__) { /* 仅开发时的调试代码，生产会被摇掉 */ }

// 开发环境：兼顾速度与可调试
module.exports = { mode: 'development', devtool: 'eval-cheap-module-source-map' };

// 生产环境：生成但不暴露源码，配合错误监控平台
module.exports = { mode: 'production', devtool: 'hidden-source-map' };

// vite.config.js
export default defineConfig({
  optimizeDeps: {
    // 强制预构建（某些依赖 Vite 无法自动探测）
    include: ['lodash-es', 'axios', 'some-cjs-lib'],
    // 排除不需要预构建的（如本地 workspace 包）
    exclude: ['@my/local-pkg'],
    // 自定义 esbuild 预构建选项
    esbuildOptions: {
      target: 'es2020',
    },
  },
});

// vite.config.js —— 用 Vite 构建可发布的库
import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'),
      name: 'MyLib',
      fileName: (format) => 'my-lib.' + format + '.js',
      formats: ['es', 'umd'],
    },
    rollupOptions: {
      // 不把 peer 依赖打进库，交给使用方提供
      external: ['react', 'react-dom'],
      output: {
        globals: { react: 'React', 'react-dom': 'ReactDOM' },
      },
    },
  },
});

// import.meta.glob：批量导入（如自动注册路由/插件）
const modules = import.meta.glob('./pages/*.vue');
// 得到 { './pages/Home.vue': () => import(...), ... }

// 立即加载版本
const eager = import.meta.glob('./locales/*.json', { eager: true });

// 环境变量：VITE_ 前缀的才暴露给客户端
// const apiUrl = import.meta.env.VITE_API_URL;

// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';

export default {
  input: 'src/index.ts',
  output: [
    { file: 'dist/index.cjs', format: 'cjs', sourcemap: true },
    { file: 'dist/index.mjs', format: 'esm', sourcemap: true },
    {
      file: 'dist/index.umd.js',
      format: 'umd',
      name: 'MyLib',
      globals: { react: 'React' },
      banner: '/*! MyLib v1.0.0 | MIT License */', // 产物头部注释
    },
  ],
  external: ['react', 'react-dom'], // 不打包 peer 依赖
  plugins: [
    resolve(),
    commonjs(),
    typescript({ tsconfig: './tsconfig.json' }),
    terser(),
  ],
};

export default {
  input: {
    index: 'src/index.ts',
    utils: 'src/utils.ts',
    hooks: 'src/hooks.ts',
  },
  output: {
    dir: 'dist',
    format: 'esm',
    // 保留源码目录结构，利于使用方做 Tree Shaking 与子路径导入
    preserveModules: true,
    preserveModulesRoot: 'src',
  },
};

// 直接用 esbuild API 打包（脱离 webpack，适合脚本/小工具）
const esbuild = require('esbuild');

esbuild.build({
  entryPoints: ['src/index.ts'],
  bundle: true,
  outfile: 'dist/bundle.js',
  minify: true,
  sourcemap: true,
  target: ['es2018'],
  format: 'esm',
  splitting: true,
  platform: 'browser',
  define: { 'process.env.NODE_ENV': '"production"' },
}).catch(() => process.exit(1));

// .swcrc —— SWC 配置示例
{
  "jsc": {
    "parser": { "syntax": "typescript", "tsx": true },
    "transform": { "react": { "runtime": "automatic" } },
    "target": "es2018"
  },
  "minify": true
}

// Rspack：字节跳动出品，Rust 编写，兼容大部分 webpack 配置与生态
// rspack.config.js（写法与 webpack 高度一致）
module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'builtin:swc-loader', type: 'javascript/auto' },
    ],
  },
  builtins: {
    html: [{ template: './index.html' }],
  },
};
// 迁移成本低，构建速度较 webpack 有数量级提升

// 远程应用（提供方）：暴露自己的组件
const { ModuleFederationPlugin } = require('webpack').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'remoteApp',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
        './Header': './src/Header',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

// 宿主应用（消费方）：远程加载对方组件
module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'hostApp',
      remotes: {
        remoteApp: 'remoteApp@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
    }),
  ],
};

// 宿主中使用远程组件
// const RemoteButton = React.lazy(() => import('remoteApp/Button'));

// Turborepo：通过任务缓存与并行大幅加速 monorepo 构建
// turbo.json
{
  "pipeline": {
    "build": {
      "dependsOn": ["^build"],
      "outputs": ["dist/**"]
    },
    "test": {
      "dependsOn": ["build"],
      "outputs": []
    },
    "lint": {}
  }
}

# .github/workflows/build.yml —— 缓存依赖与构建产物
name: Build
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'          # 缓存 npm 下载
      - run: npm ci
      # 缓存 webpack/vite 持久化缓存与 turbo 缓存
      - uses: actions/cache@v4
        with:
          path: |
            .temp_cache
            node_modules/.cache
            .turbo
          key: build-cache-${{ hashFiles('**/package-lock.json') }}-${{ github.sha }}
          restore-keys: |
            build-cache-${{ hashFiles('**/package-lock.json') }}-
      - run: npm run build

// 手动接受 HMR（框架通常已封装，无需自己写）
if (module.hot) {
  module.hot.accept('./render', () => {
    // 模块 './render' 更新时，重新执行渲染，保留应用状态
    render();
  });
  // 模块被移除时清理副作用
  module.hot.dispose((data) => {
    clearInterval(timer);
  });
}

// Vite 的 HMR API
if (import.meta.hot) {
  import.meta.hot.accept((newModule) => {
    // 用新模块更新
  });
}

// package.json 或 .browserslistrc
{
  "browserslist": [
    "> 0.5%",           // 全球使用率大于 0.5% 的浏览器
    "last 2 versions",  // 每个浏览器最近两个版本
    "not dead",         // 排除已停止更新的
    "not IE 11"         // 明确排除 IE11
  ]
}
// Babel、autoprefixer、postcss-preset-env 都读取它决定转译/加前缀程度

// babel.config.js —— useBuiltIns: 'usage' 按代码实际用到的特性注入 polyfill
module.exports = {
  presets: [
    ['@babel/preset-env', {
      useBuiltIns: 'usage', // 只注入用到的 polyfill，而非全量
      corejs: 3,
      modules: false,
    }],
  ],
};

<!-- 现代浏览器加载 module 版本，旧浏览器 fallback 到 nomodule -->
<script type="module" src="/app.modern.js"></script>
<script nomodule src="/app.legacy.js"></script>

// webpack 内置 performance 配置
module.exports = {
  performance: {
    hints: 'error',            // 超标直接报错（CI 卡关）
    maxEntrypointSize: 250000, // 入口点最大 244KB
    maxAssetSize: 244000,      // 单资源最大 238KB
    assetFilter: (name) => /\.(js|css)$/.test(name),
  },
};

// 用 bundlesize / size-limit 在 CI 中卡体积
// package.json
{
  "size-limit": [
    { "path": "dist/js/main.*.js", "limit": "150 KB" },
    { "path": "dist/css/main.*.css", "limit": "30 KB" }
  ]
}

// 1. 安装 vite 与框架插件
// npm i -D vite @vitejs/plugin-vue

// 2. 创建 vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
  plugins: [vue()],
  resolve: { alias: { '@': path.resolve(__dirname, 'src') } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
});

// 3. index.html 移到根目录，用 script type=module 引入入口
// <script type="module" src="/src/main.js"></script>

// 4. 处理差异：
//    - require 改为 import
//    - process.env.XXX 改为 import.meta.env.VITE_XXX
//    - require.context 改为 import.meta.glob
//    - CommonJS 依赖加入 optimizeDeps.include

// package.json —— 正确的入口与 sideEffects 声明
{
  "name": "@my/ui",
  "main": "dist/index.cjs",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    },
    "./styles.css": "./dist/styles.css"
  },
  "sideEffects": ["*.css"]
}

// 伪代码：如何选择构建工具
function chooseBuildTool(project) {
  if (project.type === 'library') {
    // 库/组件库：追求最小产物、多格式输出
    return 'Rollup 或 Vite 库模式';
  }
  if (project.isNew && project.framework in ['Vue3', 'React18', 'Svelte']) {
    // 新的现代框架项目：开发体验优先
    return 'Vite';
  }
  if (project.needsMicroFrontend) {
    // 需要微前端运行时共享
    return 'Webpack（Module Federation）或 Rspack';
  }
  if (project.isLegacy && project.hasComplexWebpackConfig) {
    // 老项目配置复杂但想提速
    return 'Rspack（兼容 webpack 配置）';
  }
  if (project.type === 'quickPrototype') {
    return 'Parcel（零配置）';
  }
  return 'Webpack（生态最全，兜底选择）';
}

// 自定义 loader：把源码中的 __VERSION__ 替换为 package 版本号
// version-loader.js
module.exports = function (source) {
  // this 提供 loader 上下文（options、resourcePath 等）
  const options = this.getOptions() || {};
  const version = options.version || '0.0.0';
  return source.replace(/__VERSION__/g, JSON.stringify(version));
};

// 异步 loader
module.exports = function (source) {
  const callback = this.async();
  doAsyncTransform(source).then((result) => {
    callback(null, result);
  }).catch(callback);
};

// 使用自定义 loader
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          { loader: path.resolve('./loaders/version-loader.js'), options: { version: '1.2.3' } },
        ],
      },
    ],
  },
  resolveLoader: {
    // 让 webpack 能找到本地 loaders 目录
    modules: ['node_modules', path.resolve(__dirname, 'loaders')],
  },
};

// 对 .scss 的处理链，执行顺序：sass-loader → css-loader → style-loader
{
  test: /\.scss$/,
  use: [
    'style-loader',  // 3. 把 CSS 注入 DOM
    'css-loader',    // 2. 解析 @import / url()
    'sass-loader',   // 1. 先把 Sass 编译成 CSS
  ],
}

// 自定义 plugin：构建后生成一份资源清单
class AssetManifestPlugin {
  apply(compiler) {
    // emit 钩子：在生成资源到输出目录之前触发
    compiler.hooks.emit.tapAsync('AssetManifestPlugin', (compilation, callback) => {
      const manifest = {};
      for (const filename in compilation.assets) {
        manifest[filename] = compilation.assets[filename].size();
      }
      const json = JSON.stringify(manifest, null, 2);
      // 把清单作为一个新资源加入输出
      compilation.assets['asset-manifest.json'] = {
        source: () => json,
        size: () => json.length,
      };
      callback();
    });
  }
}

module.exports = {
  plugins: [new AssetManifestPlugin()],
};

// 自定义 Vite 插件：注入构建时间到 HTML
function buildTimePlugin() {
  return {
    name: 'vite-plugin-build-time',
    // 修改最终配置
    config(config) {
      return { define: { __BUILD_TIME__: JSON.stringify(new Date().toISOString()) } };
    },
    // 转换 index.html
    transformIndexHtml(html) {
      return html.replace('</head>', '<meta name="build-time" content="' + new Date().toISOString() + '"></head>');
    },
    // 通用 transform 钩子（Rollup 兼容）
    transform(code, id) {
      if (id.endsWith('.special.js')) {
        return { code: code.replace(/foo/g, 'bar'), map: null };
      }
    },
  };
}

export default defineConfig({
  plugins: [buildTimePlugin()],
});

module.exports = {
  resolve: {
    // 省略后缀（按顺序尝试）——列得越少解析越快
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
    // 路径别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      // 强制统一某个库的版本，避免重复打包
      react: path.resolve(__dirname, 'node_modules/react'),
    },
    // 决定优先用包的哪个入口字段
    mainFields: ['browser', 'module', 'main'],
    // 减少向上查找 node_modules 的层级，提升解析速度
    modules: [path.resolve(__dirname, 'node_modules'), 'node_modules'],
    // 对称链接的处理（monorepo 常用）
    symlinks: false,
  },
};

module.exports = {
  // 声明这些依赖由外部（CDN 全局变量）提供
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
    lodash: '_',
  },
};

// HTML 中通过 CDN 引入
// <script src="https://cdn.example.com/react@18/umd/react.production.min.js"></script>
// <script src="https://cdn.example.com/react-dom@18/umd/react-dom.production.min.js"></script>

// webpack.common.js —— 公共配置
const common = {
  entry: './src/index.js',
  module: { /* 公共 loader */ },
  plugins: [ /* 公共 plugin */ ],
};

// webpack.dev.js —— 开发配置
const { merge } = require('webpack-merge');
module.exports = merge(common, {
  mode: 'development',
  devtool: 'eval-cheap-module-source-map',
  devServer: { hot: true, port: 3000 },
});

// webpack.prod.js —— 生产配置
module.exports = merge(common, {
  mode: 'production',
  devtool: 'hidden-source-map',
  optimization: { minimize: true, splitChunks: { chunks: 'all' } },
});

// package.json scripts
// "dev": "webpack serve --config webpack.dev.js",
// "build": "webpack --config webpack.prod.js"

// Vite 多环境：用 mode 与 .env 文件
// .env.development / .env.production / .env.staging
// VITE_API_URL=https://api.example.com

// vite.config.js 根据 mode 动态配置
export default defineConfig(({ mode, command }) => {
  const isProd = mode === 'production';
  return {
    build: { sourcemap: !isProd, minify: isProd ? 'esbuild' : false },
  };
});

// 用 fork-ts-checker-webpack-plugin 把类型检查放到独立进程，不阻塞打包
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'esbuild-loader', // 只转译，不检查类型
          options: { target: 'es2015' },
        },
      },
    ],
  },
  plugins: [
    new ForkTsCheckerWebpackPlugin({
      typescript: { diagnosticOptions: { semantic: true, syntactic: true } },
    }),
  ],
};

// package.json —— CI 中并行跑构建、类型检查、lint
{
  "scripts": {
    "build": "vite build",
    "type-check": "tsc --noEmit",
    "lint": "eslint src --ext .ts,.tsx",
    "ci": "npm-run-all --parallel type-check lint build"
  }
}

// tsconfig.json —— 开启 incremental，缓存类型检查结果
{
  "compilerOptions": {
    "incremental": true,
    "tsBuildInfoFile": "./.tsbuildinfo",
    "composite": true
  }
}

// Vite 原生支持 Worker 导入
import MyWorker from './heavy.worker.js?worker';
const worker = new MyWorker();
worker.postMessage({ data: bigArray });
worker.onmessage = (e) => console.log('结果', e.data);

// Webpack 5 用 new Worker(new URL(...))，自动打包 worker
const worker = new Worker(new URL('./heavy.worker.js', import.meta.url));

// WASM 导入（Vite）
// import init, { compute } from './pkg/my_wasm.js';
// await init();
// const result = compute(input);

// 用 workbox-webpack-plugin 生成 Service Worker，实现离线缓存
const { GenerateSW } = require('workbox-webpack-plugin');

module.exports = {
  plugins: [
    new GenerateSW({
      clientsClaim: true,
      skipWaiting: true,
      runtimeCaching: [
        {
          // 图片用 CacheFirst，长期缓存
          urlPattern: /\.(png|jpg|jpeg|svg|webp)$/,
          handler: 'CacheFirst',
          options: { cacheName: 'images', expiration: { maxEntries: 60 } },
        },
        {
          // API 用 NetworkFirst，优先网络、失败回退缓存
          urlPattern: /\/api\//,
          handler: 'NetworkFirst',
          options: { cacheName: 'api', networkTimeoutSeconds: 3 },
        },
      ],
    }),
  ],
};

// Vite 用 vite-plugin-pwa，配置更简洁

// 检查重复依赖
// npm ls react        —— 查看 react 被多少版本引入
// npx webpack-bundle-analyzer  —— 可视化中能看到重复模块

// 用 resolve.alias 强制统一版本
resolve: {
  alias: {
    react: path.resolve('./node_modules/react'),
    'react-dom': path.resolve('./node_modules/react-dom'),
  },
},

// package.json 用 overrides（npm）/ resolutions（yarn）强制统一
// "overrides": { "react": "18.2.0" }

// 在 CI 中用 size-limit 卡首屏体积，超标 PR 无法合并
// size-limit.json
[
  { "path": "dist/js/main.*.js", "limit": "160 KB", "gzip": true },
  { "path": "dist/js/vendor.*.js", "limit": "120 KB", "gzip": true },
  { "path": "dist/css/*.css", "limit": "40 KB", "gzip": true }
]

// 1. IgnorePlugin：忽略不需要的模块（如 moment 的所有 locale）
const webpack = require('webpack');
new webpack.IgnorePlugin({ resourceRegExp: /^\.\/locale$/, contextRegExp: /moment$/ });

// 2. ProvidePlugin：自动注入全局变量，免去到处 import
new webpack.ProvidePlugin({ React: 'react', _: 'lodash' });

// 3. 限制 chunk 请求数，避免过度分割导致请求爆炸
optimization: { splitChunks: { maxInitialRequests: 25, minSize: 20000 } };

// 4. 用 assetsInlineLimit 控制小资源内联阈值（Vite）
build: { assetsInlineLimit: 4096 };

// 5. 关闭生产环境 reportCompressedSize 提升构建速度（Vite 大项目）
build: { reportCompressedSize: false };

// 6. 用 esbuild 压缩 CSS
build: { cssMinify: 'esbuild' };

module.exports = {
  optimization: {
    // 生产模式默认开启；也可显式声明
    concatenateModules: true,
  },
};
// 效果：更少的函数闭包、更小的产物、更快的初始化
// 前提：模块必须是 ESM（CommonJS 无法被 concatenate）

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

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        parallel: true,              // 多进程并行压缩
        extractComments: false,      // 不把注释抽成单独文件
        terserOptions: {
          compress: {
            drop_console: true,      // 移除 console.*
            drop_debugger: true,     // 移除 debugger
            pure_funcs: ['console.info'], // 视为无副作用可删除
            passes: 2,               // 多轮压缩，体积更小（更慢）
          },
          mangle: { safari10: true }, // 兼容 Safari 10 的变量名混淆
          format: { comments: false },
        },
      }),
    ],
  },
};

// DefinePlugin 把变量替换为常量，配合压缩器消除不可达分支
new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' });

// 源码：
if (process.env.NODE_ENV !== 'production') {
  console.log('调试信息'); // 生产构建中：条件恒为 false，整块被删除
}

// 用 __DEV__ 标志包裹开发专用代码，生产自动摇掉
if (__DEV__) {
  validateProps(props);
}

// CSS Modules：类名局部作用域，避免全局污染
{
  test: /\.module\.css$/,
  use: [
    'style-loader',
    {
      loader: 'css-loader',
      options: {
        modules: {
          localIdentName: '[name]__[local]--[hash:base64:5]',
        },
      },
    },
  ],
}

// 使用
// import styles from './Button.module.css';
// <button className={styles.primary}>按钮</button>

module.exports = {
  module: {
    rules: [
      // asset/resource：输出单独文件（相当于 file-loader）
      { test: /\.(png|jpg)$/, type: 'asset/resource' },
      // asset/inline：转 base64 内联（相当于 url-loader）
      { test: /\.svg$/, type: 'asset/inline' },
      // asset/source：导出源码字符串（相当于 raw-loader）
      { test: /\.txt$/, type: 'asset/source' },
      // asset：自动在 resource 与 inline 之间选择
      {
        test: /\.(woff2?|eot|ttf)$/,
        type: 'asset',
        parser: { dataUrlCondition: { maxSize: 8 * 1024 } },
      },
    ],
  },
};

# nginx —— 带 contenthash 的静态资源用强缓存 + 长过期
location ~* \.(js|css|png|jpg|webp|woff2)$ {
  # 内容哈希文件名可安全长期缓存
  expires 1y;
  add_header Cache-Control "public, immutable";
}

# HTML 不缓存或短缓存，保证能拿到最新的资源引用
location / {
  add_header Cache-Control "no-cache";
}

# 优先返回预压缩的 br / gz 文件
gzip_static on;
brotli_static on;

<!-- preconnect：提前建立到关键第三方域名的连接（DNS+TCP+TLS） -->
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
<link rel="dns-prefetch" href="https://api.example.com">

<!-- preload：当前页一定会用到的关键资源，高优先级 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/js/critical.js" as="script">

<!-- prefetch：未来导航可能用到，空闲时下载，低优先级 -->
<link rel="prefetch" href="/js/next-page.js" as="script">

<!-- modulepreload：预加载 ES 模块及其依赖 -->
<link rel="modulepreload" href="/js/app.js">

// 生成详细的构建统计，供工具深度分析
// webpack --json > stats.json
// 然后上传到 https://webpack.github.io/analyse/ 或用 webpack-bundle-analyzer

module.exports = {
  stats: {
    assets: true,
    chunks: true,
    modules: false,     // 模块太多可关闭
    reasons: true,      // 显示模块被谁引入（排查为何被打包）
    chunkModules: true,
  },
};

module.exports = {
  devServer: {
    hot: true,
    port: 3000,
    open: true,
    // SPA 路由回退，刷新子路由不 404
    historyApiFallback: true,
    // 允许局域网访问（手机真机调试）
    host: '0.0.0.0',
    // 代理配置（解决开发跨域）
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
        // 转发 WebSocket
        ws: true,
      },
    },
    // 错误覆盖层
    client: {
      overlay: { errors: true, warnings: false },
      progress: true,
    },
    // 压缩响应
    compress: true,
  },
};

// 构建期固定 publicPath
module.exports = {
  output: { publicPath: '/static/' },
};

// 运行时动态设置（同一份产物部署到不同 CDN 路径）
// 在入口最顶部：
__webpack_public_path__ = window.__CDN_BASE__ || '/';

// 语言包动态导入，只加载当前语言，不打包全部
async function loadLocale(lang) {
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */
    './locales/' + lang + '.json'
  );
  i18n.setLocaleMessage(lang, messages.default);
}
// 首屏只下载一种语言包，切换时再按需拉取其它语言

// ❌ 全量引入图标库，打进上千个用不到的图标
import * as Icons from '@some/icons';

// ✅ 按需具名引入，配合 Tree Shaking 只打包用到的
import { SearchIcon, CloseIcon } from '@some/icons';

// SVG Sprite：把多个 SVG 合并成雪碧图，减少请求
// svg-sprite-loader
{
  test: /\.svg$/,
  include: path.resolve(__dirname, 'src/icons'),
  use: [{ loader: 'svg-sprite-loader', options: { symbolId: 'icon-[name]' } }],
}
// 使用：<svg><use xlink:href="#icon-search" /></svg>

// 通过 alias 把 react 指向 preact/compat，体积从约 45KB 降到约 10KB
module.exports = {
  resolve: {
    alias: {
      react: 'preact/compat',
      'react-dom': 'preact/compat',
      'react/jsx-runtime': 'preact/jsx-runtime',
    },
  },
};
// 注意：需充分测试兼容性，某些依赖 React 内部 API 的库可能不工作

// next.config.js —— 在框架封装之上做定制
module.exports = {
  // 自定义 webpack（谨慎，尽量用框架提供的能力）
  webpack: (config, { dev, isServer }) => {
    // 生产客户端构建才做的处理
    if (!dev && !isServer) {
      config.optimization.splitChunks.cacheGroups.commons = {
        name: 'commons',
        chunks: 'all',
        minChunks: 2,
      };
    }
    return config;
  },
  // 现代图片格式
  images: { formats: ['image/avif', 'image/webp'] },
  // 用 SWC 压缩（默认开启）
  swcMinify: true,
  // 实验特性：更激进的包体优化
  experimental: {
    optimizePackageImports: ['lodash-es', '@some/icons'],
  },
};

module.exports = {
  watchOptions: {
    // 忽略 node_modules，减少监听负担
    ignored: /node_modules/,
    // 聚合变化，避免频繁重建
    aggregateTimeout: 300,
    // 某些系统需要轮询才能监听（如 Docker/网络盘）
    poll: process.env.WATCH_POLL ? 1000 : false,
  },
};

module.exports = {
  // Webpack 5：精确忽略已知的无害告警
  ignoreWarnings: [
    /Failed to parse source map/,
    (warning) => warning.module?.resource?.includes('some-lib'),
  ],
};

// 内部包直接导出源码（TS），由使用方一起编译，省去中间构建
// packages/ui/package.json
{
  "name": "@repo/ui",
  "main": "./src/index.ts",
  "exports": { ".": "./src/index.ts" }
}
// 配合应用侧 transpilePackages（Next.js）或 include 编译内部包

// 自定义 plugin：把每次构建的关键指标上报到监控系统
class BuildMetricsPlugin {
  apply(compiler) {
    let start;
    compiler.hooks.compile.tap('BuildMetrics', () => { start = Date.now(); });
    compiler.hooks.done.tap('BuildMetrics', (stats) => {
      const { assets } = stats.toJson({ assets: true });
      const totalSize = assets.reduce((sum, a) => sum + a.size, 0);
      const metrics = {
        duration: Date.now() - start,
        totalSize,
        assetCount: assets.length,
        errors: stats.hasErrors(),
        timestamp: Date.now(),
        branch: process.env.CI_BRANCH,
      };
      // 上报到监控平台（Grafana/Datadog/自建）
      reportToMonitoring(metrics);
    });
  }
}

// 1. 依赖审计：CI 中检查已知漏洞
// npm audit --audit-level=high
// pnpm audit

// 2. 锁定依赖版本，用 lockfile 保证可复现
// npm ci 严格按 package-lock.json 安装

// 3. 防止密钥被打进产物：只暴露白名单前缀的环境变量
new webpack.DefinePlugin({
  // ❌ 不要直接 JSON.stringify(process.env)，会泄露所有服务端密钥
  // ✅ 只显式声明需要暴露给客户端的
  'process.env.PUBLIC_API_URL': JSON.stringify(process.env.PUBLIC_API_URL),
});

// 4. 子资源完整性（SRI）：防止 CDN 资源被篡改
// webpack-subresource-integrity 插件为产物生成 integrity 哈希

// 用 bundlesize / size-limit 在 CI 卡关（前文已述）
// 再配合 import 成本可视化，让开发写代码时就意识到体积

// 1. 编辑器插件 Import Cost：实时显示每个 import 的体积
// 2. CI 中对比 PR 前后的 bundle 差异（如 relative-ci / bundlewatch）
// 3. 定期跑 bundle-analyzer 并归档，观察趋势

// 无论用哪个工具，核心心智模型都是这套：
// 1. 入口（entry）
// 2. 依赖图（module graph）—— 从入口出发解析所有 import
// 3. 转换（transform）—— loader/plugin 处理各类文件
// 4. 优化（optimize）—— Tree Shaking / 分割 / 压缩
// 5. 输出（output）—— 带指纹的 bundle/chunk/asset
// 记住这五步，任何构建工具的配置都能对号入座

// 用 Performance API 采集资源加载耗时，定位慢资源
performance.getEntriesByType('resource')
  .filter((e) => e.initiatorType === 'script' || e.initiatorType === 'css')
  .map((e) => ({
    name: e.name.split('/').pop(),
    duration: Math.round(e.duration),
    size: e.transferSize,
    // 阻塞时间：从发现到开始下载的等待
    blocked: Math.round(e.startTime),
  }))
  .sort((a, b) => b.duration - a.duration)
  .forEach((e) => console.log(e.name, e.duration + 'ms', (e.size / 1024).toFixed(1) + 'KB'));

// package.json —— 锁定工具链，保证团队一致
{
  "packageManager": "pnpm@9.0.0",
  "engines": { "node": ">=20.0.0" }
}