微前端与部署策略
微前端把巨型应用拆成多个独立子应用（按业务/团队拆分），各自独立开发、独立部署、运行时组合成一个站点。适用信号明确：应用大到构建十几分钟、几百人改一个仓库互相阻塞、多个技术栈（Vue 老 + React 新）需要共存。
方案上，qiankun（基于 single-spa）用 JS 沙箱加载子应用，上手快；Module Federation（webpack 5 原生）在构建期共享模块，更精细但耦合构建。多数场景其实用不上微前端——先试 npm 组件库 / Monorepo，治不了“团队协作阻塞”再上。
部署层面，前端静态资源要配 CDN 加速，并处理 History 路由的 404：Nginx 试找不到文件时回落到 index.html，交给前端路由处理。
- 微前端解决的核心是“组织规模”：独立开发、独立部署、独立技术栈
- 代价很真实：沙箱复杂度、样式隔离、子应用通信、加载闪烁——不是刚需别上
- Nginx 部署三件套：gzip 压缩、静态长缓存、history 路由 try_files 回落
部署
// Nginx 配置：前端静态站标准部署 // server { // listen 80; // root /usr/share/nginx/html; // dist 产物目录 // // location / { // try_files $uri $uri/ /index.html; // History 路由：找不到文件回落首页 // } // // location ~* \.(js|css|png|jpg|svg|woff2)$ { // expires 1y; // 带哈希的静态资源：一年强缓存 // add_header Cache-Control "public, immutable"; // } // // gzip on; // 传输压缩，体积再降 70% // gzip_types text/css application/javascript application/json; // } // qiankun 微前端：主应用注册子应用（示意） // import { registerMicroApps, start } from 'qiankun'; // registerMicroApps([ // { name: 'user-app', entry: '//localhost:7101', container: '#sub', activeRule: '/user' }, // { name: 'order-app', entry: '//localhost:7102', container: '#sub', activeRule: '/order' }, // ]); // start(); // 访问 /user 时自动加载子应用
本节要点微前端治“组织规模”病，非刚需不上；Nginx 部署三件套：gzip、长缓存、try_files 回落。
