--- title: 'react項目打包優化' date: 2021-08-25 11:46:00 --- 優化前：  優化中：   優化完成：   要點： 1.路由懶加載 2.在路由懶加載前把自己開發的公共組件全部引入 3.剔除掉比較大的公共組件（例如富文本組件），在業務頁面中單獨引入 ```javascript import React, { Suspense, lazy } from 'react' import { Switch, Route, Redirect, useHistory } from 'react-router-dom' import Loading from '../components/light/Loading' //自己開發的公共組件會再此處全部引入 import { ErrorBoundary } from '../components/light' const Login = lazy(() => import('../views/light/login/Login')) const SaleLogin = lazy(() => import('../views/sale/login/Login')) const EduLogin = lazy(() => import('../views/edu/login/Login')) const Index = lazy(() => import('../views/light/index/Index')) const NotFound = lazy(() => import('../views/light/notFound/NotFound')) export default function Router() { window.reactRouter = useHistory() return ( <> <ErrorBoundary> <Suspense fallback={<Loading isLazyLoading={true}></Loading>}> <Switch> <Redirect from="/" to="/light/login" exact></Redirect> <Route path="/light/login" component={Login}></Route> <Route path="/sale/login" component={SaleLogin}></Route> <Route path="/edu/login" component={EduLogin}></Route> <Route path="/light/index" component={Index}></Route> <Route path="/sale/index" component={Index}></Route> <Route path="/edu/index" component={Index}></Route> <Route path="/404" component={NotFound}></Route> <Redirect from="*" to="/404" exact></Redirect> </Switch> </Suspense> </ErrorBoundary> <Loading></Loading> </> ) } ```