前言
此方案适用于使用Vue或React等 + WebPack打包,实行页面资源按需加载的项目
DEMO地址:https://github.com/MrLawrence1990/rmc-parent
随着业务规模的不断扩大,我们的后台管理系统逐步变成一个单体巨无霸,用户、商家、运营等等各种功能全部集中在一个系统中,随着而来的问题也越来越多
- 所有业务部门都可以修改公共部分和核心部分的代码
- 启动慢,每次开发启动的时候,连同其它业务模块一起编译,消耗了大量的时间
- 构建慢,上线需要整体项目重新编译打包,无法只进行子模块构建
- 上线冲突,由于同属一个项目,上线时会与其它业务模块的上线产生冲突
改造目标
先看一下使用react 或 vue 加 router为基础框架的项目结构
我们以Vue为例,一般用history或hash路由,在router路径下导出对页面的配置,同时使用按需加载,引用页面组件;page中也可能导出路由配置和store配置,以这样的结构对各个子模块路由分开管理
src
├── App.vue
├── assets
├── common
├── components
├── main.js
├── pages
│ ├── page1
│ │ ├── components
│ │ │ ├── xx.vue
│ │ ├── store
│ │ │ ├── index.js
│ │ ├── store
│ │ ├── router.js
│ │ └── index.vue
│ ├── page2
│ ├── page3
│ ├── page4
│ ├── ......
├── router
└── store
技术架构
项目原本的架构如下
改造后的模板是,原有项目可以保留原本页面模块的管理结构,同时可以通过http动态加载子模块的js、css、image来渲染页面,如下