react项目打包优化

优化前：

优化中：

 

优化完成：

 

 

 

要点：

1.路由懒加载

2.在路由懒加载前把自己开发的公共组件全部引入

3.剔除掉比较大的公共组件（例如富文本组件），在业务页面中单独引入

 

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>
    </>
  )
}