前言来公司一年多了，总结一下今年的项目优化建议。有的已经全面落实，有的由于时间、成本等各种原因没有完成，还有一些问题有待解决。继续观察项目目录结构图├──public#不参与编译的资源文件├──src#主程序目录│├──index.js#程序启动和渲染入口文件│├──config.js#全局configuration│├──components#全局公共组件│├──utils#公共工具│├──assets#资源文件│├──layouts#页面结构组件│├──BasicLayout#基本布局││└──OtherLayout#布局组件根据具体功能调整，在路由配置中引用│├──routes#动态路由目录（MVC结构，每个功能一个文件夹）││├──index.js#所有子系统的路由入口││├──Common#子系统公共路由，如登录页面、404、403等│││├──Account#个人中心页面│││├──Login#登录页面│││├──index.js#路由配置文件││││├──components#页面组件││││├──model#dva模型││││├──service#dva服务││││└──routes**#子路由（目录结构与父路由相同）│││└──***#其他公共页面││├──IAMS#Subsystem：后台管理系统│││├──index.js#Subsystem路由入口│││├──config.js#Subsystem路由配置文件│││├──System#一级目录││││...model│││││├──service#dva服务（如果有的话）│││││└──routes**#子路由（目录结构和父路由一样，如果any,三级子路由使用subAdd,subDetail等)││││└──***#二级导航/others│││└──***#一级导航/others││└──***#Subsystem/otherprojectdirectory层级太深。以IAMS/System/Users/routes/*为例。当我需要在Users下创建子页面时，需要到routes文件夹相对的第六层文件夹中创建一个page文件夹。文件夹中的子页面可能会继续。有文件夹，日常开发查找不方便。解决方法：目录层次不分两三级，全部使用一级目录，即各个页面文件夹在IAMS下相关子页面可以命名以区分入口，例如可以在User文件夹下创建detail.js、edit.js等相关子页面，model/components可以放在一个文件夹中。项目路由注册方式不合理。目前的路由注册方式是通过每个文件夹中的index.js导出Route，然后在上层的index.js中导入下层的所有index.js，最后在routes下的index.js中聚合。当我们需要新建一个页面文件夹时，需要在该文件夹下创建一个index.js文件导出Route，然后依次去上层文件夹导入，过程比较繁琐。同时，目前在每个子系统（如IAMS/config.js）下拆分了一个文件，提取了所有子路由的公共前缀、标题等信息，导致需要导入该文件进行路由注册.整个操作比较繁琐。解决方案：在子系统下添加一个router.js文件。系统下的所有页面路由都注册到这个文件中，然后聚合到routes/index.js创建路由；同时删除各个页面文件夹下的index.js文件，删除IAMS/config.js文件保持统一。比如untils/pageHelper下的requestFormat方法直接关联到src/config.js里面的pageHelper.requestFormat方法；解决方案：遵循统一原则，建议pageHelper与pageHelper目录关联，或者在需要的地方引入config.js，不重新关联到pageHelper下的第三方模块文件夹划分。目前一些第三方模块，比如lodashmd5moment，会重新导入导出utils文件夹下的类。一种解决方案：考虑取消这一层导出，直接使用时导入即可。第三方组件打包有问题。项目中对antd组件的封装导致官方原配置失败。增加了一些私有属性，增加了dom嵌套层级影响默认样式。同时，这些变化缺少必要的文档描述；解决方案：封装要增量处理，不能破坏原有配置，要有组件说明。自定义管理状态管理混乱。比如在设计弹窗组件时，会从外部导入可见控件的显示和隐藏，但同时在内部状态设置visible属性来控制显示和隐藏，然后再次更新状态，比如通过componentDidUpdate循环获取变化；解决方案：对于同一个功能，不要设置多个状态来管理，统一外部或内部管理，如果外部管理可以提供内部调用的方法。前端数据格式统一。例如分页格式前端：{pageNum,pageSize}后端：{currentPage,pageSize}下拉数据格式前端：{value,name}后端：{code,codeName}|{id,name}解决方案：以后对于这种公开的数据，应该采用统一的前后端格式。考虑到前端UI组件使用的是antd，并且有自己的数据格式，调整后端比较合理。项目代码数据管理方式错误滥用无论是临时数据还是长期数据放在dvamodal中，modal中也存在一些类似的详情页数据，导致部分开发者启用if1等变量区分是否为首次加载，页面无数据卸载清算等非标准设计方案：在设计之初，要结合实际业务情况考虑数据的生命周期。详细数据等临时数据可以存储在内部状态中，并随着组件的生命周期自动销毁。CSS样式问题目前项目中没有限制写css，全局样式较多，冲突严重，大量存在！重要解决办法：禁止！重要的;禁止编写全局样式；需要覆盖的样式增加一个新的类名来增加覆盖的权重；使用cssmodules管理样式热更新，打包时间过长。目前项目热更新需要10s+，打包时间约3m。替换create-react-app方案，使用webpack自定义配置进行针对性优化，启用缓存功能解决热更新慢问题，优化文件目录结构降低文件层级，针对不同情况创建不同的打包指令，减少打包文件的范围概要公司项目存在诸多弊端，但目前存在船有毛病，只能逐级修复改进的情况；思考这些问题后，这些问题背后的原因很可能是这些系统的原始构建者完全采用了开源项目，并没有立足于公司的实际业务。项目初选并没有选择antdpro来通过社区严格验证的考验。部分后续开发人员经验不足，项目负责人没有把控项目质量，导致错误设计四处蔓延。项目开发时人员变动比较大，项目思考了一年没有统一的项目开发规范，项目如何才不会变成狗屎山，很考验项目负责人的能力，如何把控质量项目中，如何统一开发规范，如何应对人员频繁变动等一些值得继续思考的问题；有经验的求指教
