基于 react + redux + react-router + antd 的最佳实践,服务于企业级中后台项目的模板,特别适用于多模块的场景
Demo 是 Ant Design Pro 的实现,可以打开控制台,对比下代码的切分粒度。
开发工具采用 athena,是基于 webpack 的应用开发工具,大大提升了开发及运行效率,主要特性如下:
- 基于 webpack 4 进行改造,构建速度快
- 开发时默认分包,启用 dll
- 基于 react 的 HMR
- 支持代理
- 一键 lint/lint-fix,集成 eslint + stylelint
- PWA 支持,默认采用 Workbox
- 环境变量
- 构建时,默认生成 vendor 包,更少的公共代码
- html 模板
- script 默认添加 preload,更少的白屏时间
针对多模块场景及 redux 存在的一些问题,参考 dva,形成了好用的 arthur,力求达到:
更少的代码,更清晰的结构,更好的性能
同时,结合 athena,构建时,会 将同一模块下的代码打包在同一个 js bundle 文件中。
相比一个页面一个 bundle 文件的懒加载模式,这种方式与多模块的场景更为契合,能有效降低 http 的损耗。
路由以模块为单位进行配置,默认在模块根目录的 routes.js
中指定
export default [
{
name: 'demo',
path: urls.DEMO,
loader: () => import('./'), # 懒加载必须提供统一的入口
// component: <component>,
children: [
{
name: 'page',
path: urls.DEMO_PAGE,
},
{
name: 'group',
path: urls.DEMO_GROUP_REGEXP,
// parent: '', # 父路由,顶级默认是 HOME,其他默认根据路由层级进行制定
// hideBreadcrumb: false, # 该路由页面是否不显示面包屑
hideInBreadcrumb: false, # 面包屑中是否显示这一层路由信息
breadcrumbRender: (route, match) => `group ${match.params.id}` # 自定义面包屑信息
}
],
},
]
菜单同样以模块为单位进行配置,默认在模块根目录的 menu.js
中指定。菜单会默认匹配路由,高亮相关的子项
export default {
name: 'demo',
icon: 'bulb',
url: urls.DEMO,
children: [
{
name: 'DEMO_PAGE',
url: urls.DEMO_PAGE,
},
{
name: 'DEMO_GROUP',
url: urls.DEMO_GROUP,
children: [
{
name: 'DEMO_GROUP/12',
url: `${urls.DEMO_GROUP}/12`,
},
{
name: 'DEMO_GROUP/34',
url: `${urls.DEMO_GROUP}/34`,
},
]
}
]
}
业务形态是多模块更存,通过约束,将模块的代码相互隔离。配置等内容都放在 global
目录下的相关文件中托管,便于开关。