微前端架构下的拆包优化一、微前端拆包策略精要 1.1 核心优化原则微前端架构下的拆包优化需要遵循三个基本原则：主从

一、微前端拆包策略精要

1.1 核心优化原则

微前端架构下的拆包优化需要遵循三个基本原则：

主从分离原则：主应用仅保留框架核心（<500KB），业务逻辑全部下沉到子应用
按需加载原则：子应用按路由/功能拆分，访问时异步加载
依赖共享原则：基础库统一版本，通过共享机制避免重复加载

1.2 技术方案对比

方案类型	适用场景	优点	缺点
CDN外部化	基础库共享	简单可靠	版本升级困难
Module Federation	复杂微前端架构	动态共享，多版本共存	配置复杂
UMD沙箱	多技术栈隔离	兼容性强	性能开销较大
Monorepo	团队内部协作	版本统一	构建耦合度高

二、Webpack深度优化配置

2.1 Module Federation高级配置

// 子应用webpack配置
new ModuleFederationPlugin({
  name: 'app1',
  filename: 'remoteEntry.js',
  exposes: {
    './Header': './src/components/Header',
    './Footer': './src/components/Footer'
  },
  shared: {
    react: { 
      singleton: true,
      requiredVersion: '^18.2.0',
      eager: true
    },
    'react-dom': {
      singleton: true,
      requiredVersion: '^18.2.0'
    },
    lodash: {
      requiredVersion: '^4.17.0',
      version: '4.17.21'
    }
  }
})

2.2 性能优化配置

// webpack性能优化配置
optimization: {
  splitChunks: {
    chunks: 'all',
    minSize: 20000,
    maxSize: 50000,
    cacheGroups: {
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10,
        reuseExistingChunk: true
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  },
  runtimeChunk: 'single'
}

三、运行时优化实战技巧

3.1 资源预加载策略

// 主应用预加载配置
import { prefetchApps } from 'qiankun';

// 页面空闲时预加载
requestIdleCallback(() => {
  prefetchApps([
    { name: 'app1', entry: '//cdn.example.com/app1' },
    { name: 'app2', entry: '//cdn.example.com/app2' }
  ]);
});

// 鼠标悬停预加载
document.getElementById('nav-app1').addEventListener('mouseover', () => {
  import(/* webpackPrefetch: true */ 'app1/entry');
});

3.2 缓存优化方案

长效缓存策略：

output: {
  filename: '[name].[contenthash:8].js',
  chunkFilename: '[name].[contenthash:8].chunk.js'
}

Service Worker缓存：

// workbox配置
workbox.routing.registerRoute(
  new RegExp('^https://cdn.example.com/'),
  new workbox.strategies.CacheFirst({
    cacheName: 'cdn-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 30 * 24 * 60 * 60 // 30天
      })
    ]
  })
);

四、异常处理与监控

4.1 健壮的错误处理机制

// 子应用错误边界
class ErrorBoundary extends React.Component {
  state = { hasError: false }

  static getDerivedStateFromError() {
    return { hasError: true }
  }

  componentDidCatch(error, info) {
    // 上报错误到监控系统
    monitor.report(error, info)
  }

  render() {
    if (this.state.hasError) {
      return <FallbackComponent />
    }
    return this.props.children
  }
}

// 主应用包裹子应用
<ErrorBoundary>
  <MicroApp />
</ErrorBoundary>

4.2 性能监控指标

// 使用Performance API监控
const perfData = {
  loadTime: performance.timing.loadEventEnd - performance.timing.navigationStart,
  renderTime: performance.getEntriesByName('first-contentful-paint')[0].startTime,
  appLoadTimes: {}
};

// 子应用加载耗时
const subAppObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach(entry => {
    perfData.appLoadTimes[entry.name] = entry.duration;
  });
});
subAppObserver.observe({ entryTypes: ['resource'] });

五、企业级最佳实践

5.1 依赖管理规范

版本锁定策略：

{
  "react": "~18.2.0",
  "react-dom": "~18.2.0",
  "antd": "~5.4.0"
}

依赖升级流程：
- 创建独立测试分支
- 全量子应用回归测试
- 灰度发布验证
- 全量升级

5.2 构建部署优化

差异化构建：

// 根据环境变量配置不同参数
const isProd = process.env.NODE_ENV === 'production';

module.exports = {
  publicPath: isProd ? 'https://cdn.example.com/' : '/',
  devtool: isProd ? false : 'source-map'
}

增量部署方案：

# 基于git diff的增量构建
git diff --name-only HEAD~1 | grep 'src/' | xargs webpack --env.target=changed

六、前沿技术探索

6.1 基于ESM的微前端

<!-- 主应用加载子应用 -->
<script type="module">
  import { mount } from 'https://cdn.example.com/app1/esm/entry.js';
  mount(document.getElementById('app1-container'));
</script>

6.2 构建工具演进

Vite微前端支持：

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return 'vendor';
          }
        }
      }
    }
  }
}

Rspack实验性功能：

experiments: {
  mf: {
    name: 'app1',
    remotes: {
      app2: 'app2@http://localhost:3002/remoteEntry.js'
    }
  }
}