企业级前端研发框架的演进与实践，web开发计划

|

-

|

-

|

|

微前端

|

一键开启

|

-

|

-

|

|

Serverless 一体化

|

插件支持

|

-

|

-

|

???

框架提供了哪些能力

一张大图

下面是一张 icejs 框架的大图，共分为四层从上到下依次是 基础设施  -> 研发标准  -> 性能体验  -> 研发模式 。

基础设施

基础设施主要包括依赖的社区方案如 UI 框架 React 、路由库 react-router 、构建工具 webpack、测试工具 jest 等，以及基于 webpack 封装的上层工程构建工具 build-scripts 等。这一层主要为 icejs 的基础依赖，同时我们基于这些基础依赖做了一定程度上的封装，让业务不需要关心底层的细节以及版本变更等，使用 icejs 时即可开箱即用。

研发标准：

研发标准主要包括通过框架提供完整的标准化的 React 应用开发最佳实践，其中主要分为：

• 标准化的研发流程：规划和约束了项目开发完整流程，包括基础规范的目录结构、样式方案、代码规范，路由规范、状态管理、以及大部分场景的业务方案等，最终形成完整的标准化的一套最佳实践方案；

• 插件生态：提供插件机制和常用插件，其能力基于工程构建工具 build-scripts 封装，因此在插件能力上也完整继承了 build-scrtips。除了通过插件定制工程能力以外，框架还为插件扩展了运行时定制的能力，这让插件拥有更多的想象空间；

• 自研体系：主要包括面向大型应用的微前端解决方案，简单友好的状态管理方案，场景复用的 Hooks 工具库，这部分能力会作为基础能力集成在框架中，只需简单配置即可按需开启。

性能体验

性能体验是衡量一个框架的重要指标，对框架而言。体验可以分为开发者体验和用户体验。其中开发者体验主要包括构建速度，错误调试，智能提示、开发文档等。对用户而言，则主要包括首屏渲染速度，预加载能力等，目前框架已支持 SSR 、Code Splitting 用于优化性能。

业务场景

不同的业务场景又不同的技术诉求，框架已支持 SPA、MPA、SSR、微前端、Serverless 一体化（仅限内部）等多种不同的业务场景。

配套模板

除了上述能力，我们还为框架提供了高质量的不同类型的的配置模板，在实际生产中可以根据业务情况进行使用。

更轻量的应用入口

框架只需要通过调用 createApp 即可启动一个包括路由、状态管理、数据请求等功能的 React 应用，同时在创建应用时你可以根据实际的业务需求进行自定义配置。相比传统的 React 应用开发而言，无需在手动去调用 ReactDOM.render() 、去创建路由 createHistory()  等繁琐而重复的应用入口的配置。

import { createApp, IAppConfig } from ‘ice’;

// 应用配置

const appConfig: IAppConfig = {