2
头图

这是一个空的 react + antd 管理后台,只需要开发页面就能让它成为你想要的管理系统

线上地址:https://vibing.github.io/reac...


项目地址:https://github.com/Vibing/rea... 欢迎 Star 和提供更好的建议

概述

  • 该管理后台基于 webpack5、 react@17、react-router@5.2、typescript、antd@4.10
  • 状态管理使用 mobx@6.x,相比 redux 使用更简单,整个项目使用多 store 进行状态管理更容易维护
  • 支持页面刷新后菜单和面包屑自动聚焦
  • 使用 dayjs 代替 momentjs
  • 支持 Code Splitting(代码分割)、Optional Chaining(可选链)、Nullish Coalescing Operator(控制合并运算符)
  • 使用 DLL 提取公共库进行缓存 提高项目加载速度
  • 使用 Tree Shaking 优化项目,打包时删除没用到的代码
  • antd 组件库按需引入

项目结构

.
├── dll // 生成的DLL
├── node_modules
├── src 
  ├── components // 公用组件
  ├── pages // 用于存放所有页面
  ├── store // 顶级store,项目内任何地方都能访问
  ├── public 
  ├── App.tsx // APP组件
  ├── routes.ts // 路由
  ├── index.tsx // 整个项目的入口
    └── index.ejs // 模板
├── tsconfig.json // typescript配置
├── typings // 自定义类型
├── webpack
├── package.json
└── yarn.lock

使用

- git clone https://github.com/Vibing/react-admin.git
- cd react-admin && yarn
- yarn dll
- yarn dev

执行上面命令后 打开 http://localhost:3000/#/home 即可访问

描述

基于 mobx 的多 store 状态管理

项目提供两个顶级 store : ui-store 和 app-store 分别用于项目级别的UI状态控制和逻辑状态控制:

// store/index.ts
import uiStore from './ui-store'
import appStore from './app-store'

export { uiStore, appStore }

// index.tsx
class Main extends Component {
  render() {
    return (
      <Provider
        uiStore={uiStore}
        appStore={appStore}
        children={
          <ConfigProvider locale={zhCN}>
            <BaseLayout />
          </ConfigProvider>
        }
      ></Provider>
    )
  }
}

你也可有只使用一个顶级 store ,具体看你项目规划和大小

除了顶级 store 用于项目级的状态管理,为了更好的状态维护,我们给每个页面创建一个对应的 store,页面级的 store 里只维护当前页面的状态:

// pages/Home/store/index.ts
import { action, configure, makeObservable, observable } from 'mobx'

configure({
  enforceActions: 'observed'
})

export default class Store {
  constructor() {
    makeObservable(this, {
      count: observable,
      changeCount: action
    })
  }

  count: number = 0

  changeCount = (count: number) => {
    this.count = count
  }
}
// pages/Home/index.tsx
import React from 'react'
import { Provider } from 'mobx-react'
import Content from './components/content'
import Store from './store'

export default class Home extends React.Component {
  store: Store = new Store()

  render() {
    return <Provider store={this.store} children={<Content />} />
  }
}

每个页面的 store 在页面被创建时创建,页面组件销毁时自动销毁,不会给内存压力

你可以启动项目,在 home 页面中点击按钮改变 store 的值体验一下

菜单数据

目前的菜单数据是模拟的,在 src/components/Layout/_defaultRoutes.ts中,实际开发时,这里的数据应该通过接口请求,然后渲染出来,你可以告知服务端小伙伴使用_defaultRoutes.ts里的数据格式

打包

在项目中运行yarn build就可以将项目打包到根目录的dist文件夹中,如果想将打包后的项目上传到阿里云OSS,我推荐你使用我编写的 webpack 插件:webpack-oss-plugin 它可以在打包后将打包产物上传到你配置的 OSS 中

其他

webpack 5 新特性

webpack5 相较于之前版本,主要以优化为主

  • 使用长期缓存,提升构建速度
  • 减少原先 bundle 内自动生成的冗余代码
  • NodeJS 的 polyfill 脚本被移除
  • 更好的 TreeShaking
  • Module Federation 让 Webpack 达到了线上 runtime 的效果,让代码直接在独立应用间利用 CDN 直接共享,可以说为微前端提供了一个新思路

关于 webpack5 新特性和 Module Federation可以看这篇文章

总之,随着 webpack 不断更新,它身后的团队肯定是不断对 webpack 进行优化的,我们尽量使用新版本(稳定版)来构建项目

DLL

将不常改动的库或插件(react、react-dom、axios...)压缩在一个文件里,浏览器访问后缓存下来,以后再访问会快很多。

关于 @babel/preset-env

这里我没有使用useBuiltInscorejs,因为我公司项目是内部使用,基本都是现代浏览器,不用考虑浏览器兼容问题,如果你需要考虑浏览器兼容 ES6 新语法,请使用corejs来作为 polyfill

typescript

不需要使用ts-loader, babel-loader已经兼容 typescript 的编译,配合 @babel/preset-typescript 就能使用 typescript 开发。

图片、文字

webpack5 不需要url-loader 等 loader 来解析图片和文字文件了,具体配置看代码吧

resolve

解析范围尽量缩小 来减少 webpack 搜索范围,比如使用 exclude、include

多线程编译打包

nodejs 可以多线程来充分使用 CPU,所以可以使用类似 thread-loader的库或插件来进行优化,提高构建效率

其他

有些没说,具体看代码吧,有更好的优化请告知我,谢谢


alwaysVe
1.9k 声望162 粉丝

前进