微前端项目

微前端项目

微前端的产生

当前项目多数都是spa单页应用，随着业务的发展一个项目在开发过程中越来越大。
这时会将一个项目拆分成多个子项目

SPA项目 router

按业务拆分项目

从nginx将一个项目拆分成多个子项目。每个项目独立的存在，解决了web-main项目冗大的问题。但项目模块之间的通信变得复杂

微前端模块拆分项目

1. 从Nginx拆分项目

2. 提取通用模块

3.微服务模块使用方式

4.微服务模块使用方式【微前端版】

微前端模块开发

前端模块生成

NPM包开发

npm包开发模式 NPM 包开发规范

NPM包发布

src目录下为原文件，产出dist目录下为UMD模块

NPM包发布【微前端版】

将dist 目录内的资源发布到CDN上，同时在Kone平台上建立包版本与资源列表之间的关系，在资源注入时会使用。

模块使用

npm install 将资源加载到本地node_modules目录下

模块使用【微前端版】

在项目编译时将依赖的模块按版本注入到HTML中。可以资源打包时间，同时增强模块的使用。

模块开发流程