前端面试亮点：微前端架构实战与原理深度解析

3. 样式隔离

主要通过动态添加移除样式标签实现。部分场景下也可借助 Shadow DOM 进行严格隔离，但这要求浏览器支持且可能带来兼容性成本。

实战常见问题与解决方案

老项目静态资源加载

对于基于 jQuery 的多页老项目，静态资源路径往往是痛点。

方案一：重写 getTemplate 在 index.html 加载前替换资源路径。

start({ 
  getTemplate(tpl) { 
    return tpl.replace('<img src="./img/jQuery1.png">', '<img src="http://localhost:3333/img/jQuery1.png">'); 
  } 
}); 

方案二：劫持 DOM 插入 针对动态插入的标签，劫持 innerHTML 等方法替换相对路径为绝对路径。

beforeMount: app => { 
  if(app.name === 'purehtml'){ 
    $.prototype.html = function(value){ 
      const str = value.replace('<img src="/img/jQuery2.png">', '<img src="http://localhost:3333/img/jQuery2.png">') 
      this[0].innerHTML = str; 
    } 
  } 
} 

若改造成本过高，使用 iframe 嵌入也是可行的降级方案。

路由模式冲突

主应用与子应用的路由模式（Hash vs History）不一致是常见坑。

• History + History： 推荐方式。子应用跳转需借助父级 router 对象。
• Hash + Hash： 可通过自定义 activeRule 实现，子应用需加路由前缀。
• 混合模式： 建议统一使用原生 history 对象处理跳转，避免依赖各自 router。

组件与依赖复用

• 组件共享： 可将组件挂载至 window 全局对象，或通过 loadMicroApp 手动加载依赖子应用。
• 依赖复用： 配置 webpack 的 externals 将公共库设为外部依赖。利用 CDN 缓存减少重复加载。
• Webpack 联邦模块： 适合现代工程化项目，可实现模块共享与动态加载，但对老旧项目适配成本高。

// webpack.config.js 示例
const { ModuleFederationPlugin } = require('webpack').container;
new ModuleFederationPlugin({
  name: 'main_app',
  remotes: { shared_module: 'shared_module@http://localhost:8081/remoteEntry.js' },
});

调试与预加载

• 调试： 每个子应用独立启动，主应用配置指向本地端口。配合 npm-run-all 工具可同时启动多个服务。
• 预加载： start 函数的 prefetch 参数控制预加载策略。设置为 'all' 可在启动时预加载所有资源。

start({ prefetch: 'all' });

框架选型对比

总结

微前端不仅是架构升级的手段，更是体现开发者工程视野的试金石。在面试中，能够清晰阐述原理、预判潜在风险并提出可行方案，远比单纯背诵 API 更有说服力。希望上述实战经验能为你构建技术壁垒提供参考。