微服务与微前端，都是希望将某个单一的单体应用，转化为多个可以独立运行、独立开发、独立部署、独立维护的服务或者应用的聚合，从而满足业务快速变化及分布式多团队并行开发的需求。如康威定律(Conway’s Law)所言，设计系统的组织，其产生的设计和架构等价于组织间的沟通结构；微服务…

前端数据监控一般分为性能数据监控和线上异常监控。本文对这两块数据的监控原理和方法进行整理说明。 将监控代码注入到页面中，手动计算时间差或者使用浏览器API进行数据统计。 不将统计代码注入到页面中，一般借助虚拟机对页面进行性能数据分析。 在进行性能数据监控之前，先要明确页面从用户…

脚手架能够帮我们自动生成包含本地调试、编译、打包、发布等工具的项目目录，使我们能够减少大量重复劳动的同时，遵循一定的开发规范，大大提升我们的开发、协同效率。 下文中出现的 generator 统一代指 yeoman 脚手架生成器。 yeoman 脚手架生成器（generator…

微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。 同时，它们也可以在共享组件的同时进行并行开发——这些组件可以通过 NPM 或者 Git Ta…

从 AJAX（Asynchronous JavaScript + XML，异步JavaScript和XML）开始应用， 尤其是 AngularJS 推出之后 SPA（Single Page App，单页应用）已经成为前端 App 的必选方案。 SPA 可以在客户端提供完整的路由…

本文分为以下四部分： 前端微服务化思想介绍 微前端的设计理念 实战微前端架构设计 基于 Mooa 进行前端微服务化

下面是一个使用脚手架来初始化项目的典型例子。 随着前端工程化的理念不断深入，越来越多的人选择使用脚手架来从零到一搭建自己的项目。其中大家最熟悉的就是create-react-app和vue-cli，它们可以帮助我们初始化配置、生成项目结构、自动安装依赖，最后我们一行指令即可运行…

本文共计约 7k 字，预计阅读时间 15mins 微前端的缘由：单体应用与微服务架构 微服务架构带来了哪些好处？ 那么前端的现状呢？ —— 臃肿的前端 微前端的定义 - 将微服务理念扩展到前端开发 拆分微前端所带来的好处 微前端的核心思想 微前端的可选实践方案 页面优化与实例