共计 2868 个字符，预计需要花费 8 分钟才能阅读完成。
这是一个空的 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的库或插件来进行优化，进步构建效率
其余
有些没说，具体看代码吧，有更好的优化请告知我，谢谢
