缘起

随着项目的越来越多，项目的越来越大，后端开始拆分服务，于是出现了微服务，前端也一样，为了更好的开发和向后端靠拢，于是微前端诞生了！

微前端的好处

  • 首先，微前端可以把一个大项目拆成若干个子项目，虽然前期拆分可能费时费力，但是一旦完成，项目的独立性和扩展性大大提升！
  • 其次，微前端更利于子项目内部的耦合性，子项目之间的解耦性
  • 最后，微前端更有利于前端的精细化开发
    上面的是不是太抽象了，笼统点来说，微前端就是用来把一个前端大项目拆成多个小项目的，增加前端开发的独立性，扩展性！

微前端的难点

  • 需要思考如何拆分现有的项目
  • 需要思考子项目和父项目之间的通信
  • 需要兼容不同框架写的子项目

如何解决

其实上面的这些都不是事，目前成熟的方案已经能帮你解决绝大部分问题，唯一的问题就是你需要思考如何拆分项目！这里有三种解决方案

  • 按照框架拆分
    同一框架的项目合在一起，不同框架的项目在一起
  • 按照业务逻辑拆分
    这个比较常用，每个子项目可以单独运行，子项目之间只有关联，同时也可以在父项目中运行，因为技术开发都是为业务服务的！
  • 按照功能模块
    比如一个业务里有多个功能模块，比如某个商城有购物车模块，商品列表模块，订单提交模块等等，它们合在一起就是一个商城大模块，拆的这么细的好处是数据隔离更加方便，但是使用的不多！

成熟方案

  • single-spa
  • systemJs
  • qiankun
  • iframe
    方案不止这些，小编是拿出几个用的多的，如果大家自己有时间，可以自己实现。single-spa可以兼容多个不同框架。systemJs属于基座导入，适合于单一框架拆分！iframe其实是一个一直被忽略的标签，它除了性能会降低，其实很强大，可以隔离数据，从而实现微前端的功能！
    重点来讲讲阿里的qiankun，因为阿里用的大部分都是react，所以qiankun能不能兼容不同的框架要测试过才知道，但是对单一框架（react）的兼容性绝对是杠杠的！使用也很简单，大家看看示例就知道了，这里不重点展开！

尾声

原来想着写个简单的demo给大家，但是因为小编最近忙，demo就不写了，大家有兴趣可以自己去尝试下！
知难行易，很多事自己尝试之后，才会有收获！