2B 项目-优化

概览

• 特点：对内、小步快跑、模块分割
• 目标：效率、好用

微前端

• 背景: 部门从电销 LEC 发展而来不满 1 年，站在巨人的肩膀上开发, 高速发展，人员增速快，小步快跑
• 问题: 多个部门维护一个 git, 上线排队，其他团队构建代码有可能影响到我们的代码，代码规范和组件方式不统一, 不好管理，大促封线影响迭代
• 方案: 微前端拆分, 域名拆分, 父容器转移
• 效果: 打包构建变快，上线不在排队不用等待，上线方案独立互不干扰

脚手架

• 背景：微前端抽离项目过多，5 个左右，或者新增有新增子应用项目，每次看文档，因为理解不一致
• 问题：根据文档来，理解不一致，导致新创建项目，有可能出错，需要仔细比对哪出和文档有出入，造成失败，有时候线下看不出来，路径匹配出错，可能影响在上线前才能发现
• 方案：脚手架抽离
• 效果：新项目通过工具自动化创建，不在一一比对

构建统一

• 背景: 随着 LPC 发展慢慢演变，发现跟班主任辅导老师部门业务重叠(数据报表中心、排灌版、工作台、课程报名)，部分功能它有它也要，有细微差别可做成配置化
• 问题: 两部门规范不一致，打包构建方式不同意，新成员加入成本理解成本较高，一个用 vue-cli，一个用 原生 Webpack 构建，需求经常跨越式开发，易乱，子应用无法单独打开，需要基于父应用打
• 方案: 文档理解, 升级老 Webpack, 项目多 并写自动化配置工具 wp2vite wp2vuecli
• 效果: 各种构建方式统一，成员不在来回切换

异步加载

• 背景: 组织架构节点层级深，过多历史原因无限制，全国-团队-大组-分部-小初高-团-小组-校-人，checkbox 节点过多 9 千多
• 问题: 配置中包含组织，需要复显，并勾选默认选中
• 方案: 将选中的 dom 节点，缓存到一个字符串变量中，暂存起来，详情的时候异步获取
• 效果: 异步加载组件，将不再影响整个页面的现实顺序

虚拟列表

• 背景: 内部项目，需要快速满足需求，能用即可，读取 上传 excel 中的列，简单过滤即可
• 问题: 三万条的下拉框数据，一下子渲染出来，页面很卡顿，无法使用
• 方案: 虚拟列表
• 效果: 页面不在卡顿，可正常搜索结果

单元测试

• 背景: 工具方法类型多，无收敛控制，每个人参与就新增一些
• 问题: 老得文档已无人维护和更新，不知道方法是否适合自己
• 方案: 工具方法增加单元测试，基础组件模块增加测试用例，通过测试用例更好的理解方法，理解组件使用方式
• 效果: 通过测试用例发现一些问题，核心模块也增加测试用例，方便更新

综合

• UI 库按需加载
• 大文件分片上传
• 公共组件抽离

场景

• 下拉框
• 组织架构
• 构建统一
• 脚手架
• 单元测试