关于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.tsimport uiStore from './ui-store'import appStore from './app-store'export { uiStore, appStore }// index.tsxclass 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.tsimport { observable, configure, makeObservable } from 'mobx'configure({  enforceActions: 'observed',})export default class Store {  constructor() {    makeObservable(this)  }  @observable timestamp = new Date().getTime()}

// pages/Home/index.tsximport 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的库或插件来进行优化，进步构建效率

其余

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