Share an empty backend based on webpack5 + react + antd, well optimized, ready to use

This is an empty react + antd management backend, you only need to develop the page to make it the management system you want

Online address: https://vibing.github.io/react-admin/index.html

Project address: https://github.com/Vibing/react-admin Welcome to Star and provide better suggestions

Overview

• The management background is based on webpack5, react@17, react-router@5.2, typescript, antd@4.10
• State management uses mobx@6.x , which is simpler to use than redux, and the entire project uses multiple stores for state management, which is easier to maintain
• Support auto focus of menu and breadcrumbs after page refresh
• Use dayjs instead of momentjs
• Support Code Splitting, Optional Chaining, Nullish Coalescing Operator (control merge operator)
• Use DLL extract public libraries for caching to improve project loading speed
• Use Tree Shaking optimize the project, delete unused code when packaging
• The antd component library is introduced on demand

Project structure

.
├── 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

use

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

After executing the above command, open http://localhost:3000/#/home to access

description

Multi-store state management based on mobx

The project provides two top-level stores: ui-store and app-store, which are respectively used for project-level UI state control and logic state control:

// 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>
    )
  }
}

You can also use only one top store, depending on your project plan and size

Except for the top-level store for project-level state management, for better state maintenance, we create a corresponding store for each page. The page-level store only maintains the state of the current page:

// 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 />} />
  }
}

The store of each page is created when the page is created, and the page component is automatically destroyed when the page component is destroyed, which will not put pressure on memory

You can start the project, click the button on the home page to change the value of store to experience

Menu data

The current menu data is simulated. In src/components/Layout/_defaultRoutes.ts , in actual development, the data here should be requested through the interface and then rendered. You can tell the server partner to use the data format in _defaultRoutes.ts

Bale

Run yarn build in the project to package the project into the dist folder of the root directory. If you want to upload the packaged project to Alibaba Cloud OSS, I recommend you to use the webpack plugin I wrote: webpack-oss-plugin You can upload the packaged product to your configured OSS after packaging

other

New features in webpack 5

Compared with the previous version, webpack5

• Use long-term caching to increase build speed
• Reduce the redundant code automatically generated in the original bundle
• NodeJS polyfill script is removed
• Better TreeShaking
• Module Federation allows Webpack to achieve the effect of online runtime, allowing code to be directly shared between independent applications using CDN, which can be said to provide a new idea for the micro front end

webpack5 new features of Module Federation please see this article

In short, as webpack is constantly updated, the team behind it must continue to optimize webpack. We try to use the new version (stable version) to build the project

DLL

Compress the infrequently changed libraries or plug-ins (react, react-dom, axios...) into a file, and cache them after the browser visits, and visits in the future will be much faster.

About @babel/preset-env

I did not use useBuiltIns and corejs , because my company’s projects are for internal use, basically modern browsers, no need to consider browser compatibility issues, if you need to consider browser compatibility with ES6 new syntax, please use corejs as a polyfill

typescript

There is no need to use ts-loader , babel-loader already compatible with typescript compilation, and you can use typescript development with @babel/preset-typescript.

Picture, text

webpack5 does not need url-loader to parse pictures and text files, please refer to the code for specific configuration

resolve

The scope of parsing should be narrowed down as much as possible to reduce the scope of webpack search, such as using exclude and include

Multi-threaded compilation and packaging

nodejs can be multi-threaded to make full use of the CPU, so you can use thread-loader to optimize and improve construction efficiency

other

Some did not say, please look at the code for details, please let me know if there is a better optimization, thank you