React在构建高性能前端应用时有哪些最佳实践？

本文共计3189个文字，预计阅读时间需要13分钟。

目录+提示：+1. 修改webpack配置，添加ModuleFederationPlugin+2. 本地开发测试+3. 根据路由变化自动加载对应的服务入口+4. 线上部署+5. 问题记录+提示：+老项目是一个多模块的前端项目，有一个框架层级的架构+

目录

• 前提：
• 1. 修改webpack增加ModuleFederationPlugin
• 2.本地开发测试
• 3.根据路由变化自动加载对应的服务入口
• 4.线上部署
• 5.问题记录

前提：

老项目是一个多模块的前端项目，有一个框架层级的前端服务A，用来渲染界面的大概样子，其余各个功能模块前端定义自己的路由信息与组件。本地开发时，通过依赖框架服务A来启动项目，在线上部署时会有一个总前端的应用，在整合的时候，通过在获取路由信息时批量加载各个功能模块的路由信息，来达到服务整合的效果。

// config.js // 这个配置文件 定义在收集路由时需要从哪些依赖里收集 modules: [ 'front-service-B', 'front-service-C', 'front-service-D', ... ],

痛点

• 本地联调多个前端服务时比较麻烦，需要下载对应服务npm资源，并在config.js中配置上需要整合的服务名称，并且在debugger时，看到的source树中是经过webpack编译后的代码。