分享一个基于webpack5+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进行状态管理，更易于维护，支持页面刷新后自动菜单和面包屑Focus使用dayjs代替momentjs，支持CodeSplitting（代码拆分）、OptionalChaining（可选链接）、NullishCoalescingOperator(controlmergingoperator)使用DLL提取公共库进行缓存提高项目加载速度使用TreeShaking优化项目，打包时删除未使用的代码antd组件库根据需要导入项目结构。├──dll//生成的DLL├──node_modules├──src├──components//公共组件├──pages//用于存储所有页面├──store//顶级存储，在任何地方都可以访问project├──public├──App.tsx//APP组件├──routes.ts//路由├──index.tsx//整个项目入口└──index.ejs//模板├──tsconfig.json//typescript配置├──typings//自定义类型├──webpack├──package.json└──yarn.lock使用-gitclonehttps://github.com/Vibing/react-admin.git-cdreact-admin&&yarn-yarndll-yarndevopenhttp://localhost:3000/执行以上命令后#/home可以访问，描述基于mobx的多store状态管理项目。项目提供了两个顶层store：ui-store和app-store，用于项目级的UI状态控制和逻辑状态控制：//store/index.tsimportuiStorefrom'./ui-store'importappStorefrom'./app-store'export{uiStore,appStore}//index.tsxclassMainextendsComponent{render(){return(}>)}}您也可以只使用一个顶级商店，具体取决于您的项目规划和规模。除了top-levelstore用于项目级的状态管理，为了更好的状态维护，我们为每个页面创建对应的store，页面级store只维护当前页面的状态：//pages/Home/store/index.tsimport{action,configure,makeObservable,observable}来自'mobx'configure({enforceActions:'observed'})exportdefaultclassStore{constructor(){makeObservable(this,{count:observable,changeCount:action})}count:number=0changeCount=(count:number)=>{this.count=count}}//pages/Home/index.tsximportReactfrom'react'import{Provider}from'mobx-react'importContentfrom'./components/content'importStorefrom'./store'exportdefaultclassHomeextendsReact.Component{store:Store=newStore()render(){return}/>}}每个页面的存储在页面被创建时创建创建，页面组件销毁时会自动销毁，不会造成内存压力。可以启动项目，点击首页按钮更改店铺值，体验菜单数据。当前的菜单数据是模拟出来的，在src/components/Layout/_defaultRoutes.ts中，实际开发中应该是通过接口请求这里的数据，然后渲染。可以告诉服务端小伙伴使用_defaultRoutes.ts中的数据格式打包项目，在项目中运行yarnbuild将项目打包到根目录下。在dist文件夹下，如果你想将打包后的项目上传到阿里云OSS，推荐你使用我写的webpack插件：webpack-oss-plugin，它可以将打包后的产品打包后上传到你配置的OSS。其他webpack5新特性webpack5与之前的版本相比，主要侧重于优化，使用长期缓存来提高构建速度，减少原始bundle中自动生成的冗余代码。删除了NodeJSpolyfill脚本。更好的TreeShakingModuleFederation让Webpack达到在线运行时的效果，让代码可以直接在独立的应用程序之间使用CDN共享。可以说，它为微前端提供了一种新思路。关于webpack5和ModuleFederation的新特性，可以看这篇文章。总之，随着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等加载器来解析图文文件。具体配置请参考代码。resolve解析范围尽量缩小，减少webpack的搜索范围。使用CPU，所以可以使用类似thread-loader的库或插件来优化提高构建效率。其他的就不说了，具体看代码吧，有没有更好的优化请指教，谢谢
