xiaoniuge36/bundle-optimizer

Bundle Optimizer Skill

打包优化指导，帮助 AI 完成 Bundle 分析、代码分割、Tree Shaking、依赖优化等任务。

核心能力

| 能力 | 说明 | |------|------| | 📊 Bundle 分析 | 分析打包产物构成 | | ✂️ 代码分割 | 路由/组件级别分割 | | 🌳 Tree Shaking | 移除未使用代码 | | 📦 依赖优化 | 减少第三方库体积 | | 🗜️ 压缩优化 | Gzip/Brotli 压缩 |

---

Bundle 分析

分析工具

# webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer

# 在 webpack 配置中
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
plugins: [new BundleAnalyzerPlugin()]

# Vite 使用 rollup-plugin-visualizer
npm install --save-dev rollup-plugin-visualizer

分析报告解读

| 指标 | 说明 | 目标 | |------|------|------| | 总大小 | 所有 chunks 总和 | < 500KB (gzip) | | 主包大小 | main chunk | < 150KB (gzip) | | 最大 chunk | 单个最大包 | < 200KB (gzip) | | 重复依赖 | 同一库多个版本 | 0 |

---

代码分割

路由级分割

// React 路由懒加载
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
      </Routes>
    </Suspense>
  );
}

// Vue 路由懒加载
const routes = [
  {
    path: '/dashboard',
    component: () => import('./pages/Dashboard.vue'),
  },
  {
    path: '/settings',
    component: () => import('./pages/Settings.vue'),
  },
];

组件级分割

// 重组件动态导入
const HeavyChart = lazy(() => import('./HeavyChart'));
const RichEditor = lazy(() => import('./RichEditor'));

// 条件加载
function Editor({ type }) {
  const EditorComponent = useMemo(() => {
    if (type === 'rich') {
      return lazy(() => import('./RichEditor'));
    }
    return lazy(() => import('./SimpleEditor'));
  }, [type]);

  return (
    <Suspense fallback={<Skeleton />}>
      <EditorComponent />
    </Suspense>
  );
}

魔法注释

// 命名 chunk
const Dashboard = lazy(() => 
  import(/* webpackChunkName: "dashboard" */ './Dashboard')
);

// 预加载
const Settings = lazy(() => 
  import(/* webpackPrefetch: true */ './Settings')
);

// 预获取
const Reports = lazy(() => 
  import(/* webpackPreload: true */ './Reports')
);

---

依赖优化

按需导入

// ❌ 全量导入
import _ from 'lodash';
import * as antd from 'antd';

// ✅ 按需导入
import debounce from 'lodash/debounce';
import { Button, Table } from 'antd';

// ✅ 使用 babel-plugin-import
// .babelrc
{
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

替换大型依赖

| 原依赖 | 替代方案 | 体积减少 | |--------|----------|----------| | moment | dayjs | ~95% | | lodash | lodash-es + 按需 | ~80% | | axios | ky / redaxios | ~70% | | uuid | nanoid | ~90% |

// moment -> dayjs
// ❌ import moment from 'moment';
// ✅ import dayjs from 'dayjs';

// lodash -> 按需
// ❌ import _ from 'lodash';
// ✅ import debounce from 'lodash-es/debounce';

外部化依赖

// webpack externals
module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

// vite rollupOptions
export default {
  build: {
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
};

---

Tree Shaking

确保生效

// package.json 设置 sideEffects
{
  "sideEffects": false
}

// 或指定有副作用的文件
{
  "sideEffects": [
    "*.css",
    "*.scss"
  ]
}

避免阻碍

// ❌ 阻碍 Tree Shaking
export default {
  add: (a, b) => a + b,
  subtract: (a, b) => a - b,
};

// ✅ 支持 Tree Shaking
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

---

压缩配置

Terser 配置

// webpack
optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
          drop_console: true,
          drop_debugger: true,
        },
      },
    }),
  ],
}

Gzip/Brotli

// vite
import viteCompression from 'vite-plugin-compression';

export default {
  plugins: [
    viteCompression({ algorithm: 'gzip' }),
    viteCompression({ algorithm: 'brotliCompress' }),
  ],
};

---

触发关键词

| 类型 | 关键词示例 | |------|-----------| | 打包优化 | "包体积"、"Bundle大"、"打包优化" | | 代码分割 | "代码分割"、"懒加载"、"动态导入" | | 依赖优化 | "依赖太大"、"替换lodash"、"按需导入" |

---

检查清单

## Bundle 优化清单

- [ ] 运行 Bundle 分析
- [ ] 实现路由级代码分割
- [ ] 按需导入 UI 库
- [ ] 替换大型依赖
- [ ] 启用 Tree Shaking
- [ ] 配置 Gzip/Brotli
- [ ] 设置性能预算