关于react.js:分享一个基于webpack5-react-antd的空后台优化的不错拿来即用

这是一个空的 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 {observable, configure, makeObservable} from 'mobx'

configure({enforceActions: 'observed',})

export default class Store {constructor() {makeObservable(this)
  }

  @observable timestamp = new Date().getTime()
}

// 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: any = 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

这里我没有应用 useBuiltIns 和corejs，因为我公司我的项目是外部应用，根本都是古代浏览器，不必思考浏览器兼容问题，如果你须要思考浏览器兼容 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的库或插件来进行优化，进步构建效率

其余

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