当一个前端项目变得越来越复杂，提高工程化中的编译速度、提高团队于团队之间的高效开发等场景，微前端是目前为止最适合的解决方案，它解决了不同团队使用不同技术栈的问题、解决了项目太过于庞大引发的各种问题。
以下是使用web-components来进行微前端的思路。
1、使用自定义元素，不限定使用的框架类型，只要是最终渲染为html即可。
自定义元素定义方法
2、使用自定义元素的生命周期，可以灵活处理组件的生命周期事件。
自定义元素的生命周期
3、2017年各浏览器对web components的支持情况
2017年各浏览器对web components的支持情况
4、目前浏览器对web components的支持情况
截止2019-05-03浏览器的支持情况
5、对于不支持的浏览器可以进行polyfill
不支持web components目前有现成的polyfill插件
6、支持web components的框架
支持web components的框架
7、使用自定义元素配合服务端进行渲染
自定义元素和SSI配合使用
8、配合SSI之后，微前端化的代码结构
代码结构
9、微前端化遇到多页应用时，会有切换页面的问题，一个微应用内的路由切换很容易，但是应用与应用的路由切换就比较麻烦。
每一个应用有独立的路由
10、全局管理路由，通过一个全局的壳子，进行路由的配置和切换。
全局路由管理页面碎片路由
缺点是需要共享全局代码
缺点是需要共享全局代码
11、微前端的一些注意点
不要构建元框架避免共享代码
独立分组：不要共享运行时、状态和全局变量
跟合作团队沟通：分享最佳实践
轻量打包：但需要的适合注册自定义组件和下载代码
测量性能：http/2很好，进行优化当不要过度优化
所有权很重要：必要时使用团队前缀
制定一个设计系统：创建一个样式指导、样式库
分享者
其他资料：
- webcomponents学习网站：https://www.webcomponents.org/
最后我的感觉是：
有了微前端的一个可以参考的方向:web components，也是前端一个发展的方向，但是落地到项目，还是不太清楚应该从那里做起，如何实现这样一个微前端的项目架构。
继续学习！
网友评论