基于Webpack的前端“微服务”拆分，代码可插拔

前言

此方案适用于使用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来渲染页面，如下