打包优化——修改脚手架配置说明 & antd-mobile 按需加载 & 基于路由的代码分割（按需加载）

修改脚手架配置说明

• create-react-app 中隐藏了 webpack 的配置，隐藏在 react-scripts 包中。 修改脚手架的 webpack 配置有两种方式：
  • 运行命令 npm run eject 释放 webpack 配置（注意：不可逆操作）
  • 通过第三方包重写 webpack 配置（比如：react-app-rewired 等）

yarn add react-app-rewired

antd-mobile 按需加载

地址——https://mobile.ant.design/docs/react/use-with-create-react-app-cn

① 打开 antd-mobile 在 create-react-app 中使用的文档。
② 安装 yarn add react-app-rewired customize-cra（用于重写脚手架配置）
③ 修改 package.json 中的 scripts。
④ 在项目根目录创建文件：config-overrides.js（用于覆盖脚手架默认配置）
⑤ 安装 yarn add babel-plugin-import 插件（用于按需加载组件代码和样式
⑥ 修改 config-overrides.js 文件，配置按需加载功能。
⑦ 重启项目（yarn start）。
⑧ 移除 index.js 中导入的 antd-mobile 样式文件。
⑨ 将 index.css 移动到 App 后面，让 index.css 中的页面背景色生效。

package.json中：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
  "eject": "react-scripts eject"
}

config-overrides.js中：

地址——https://mobile.ant.design/docs/react/use-with-create-react-app-cn

const { override, fixBabelImports } = require('customize-cra');
module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd-mobile',
    style: 'css',
  }),
)

基于路由的代码分割（按需加载）

代码分割官方地址——https://react-1251415695.cos-website.ap-chengdu.myqcloud.com/docs/code-splitting.html

• 目的：将代码按照路由进行分割，只在访问该路由时才加载该组件内容，提高首屏加载速度。
• 如何实现？React.lazy() 方法 + import() 方法 、Suspense 组件（React Code-Splitting文档）。
• React.lazy() 作用：处理动态导入的组件，让其像普通组件一样使用。
• import(‘组件路径’) 作用： 告诉 webpack ，这是一个代码分割点，进行代码分割。
• Suspense 组件：用来在动态组件加载完成之前，显示一些 loading 内容，需要包裹动态组件内容。

const CityList = React.lazy(() => import('./pages/CityList')) 

import { Suspense } from 'react'
<Suspense fallback={<div>loading...</div>}> 
  <Route path="/citylist" component={CityList} /> 
</Suspense> 

实例改造

在src/App.js中

// import Home from './views/Home/index.js'
// import Login from './views/Login/index.js'

const Home = React.lazy(() => import('./views/Home/index.js'))
const Login = React.lazy(() => import('./views/Login/index.js'))

在src/App.js中

   <BrowserRouter>
+      <Suspense fallback={<div className='globalLoading'>正在加载...</div>}>
        {/*全局路由*/}
        <Switch>
          <Redirect exact from='/' to='home'/>
          <Route path='/login' component={Login}/>
          <Route path='/home' component={Home}/>
          <Route path='/city' component={City}/>
          <Route path='/login' component={Login}/>
          <Route path='/map' component={MapSearch}/>
          <Route path='/proxy' component={TestProxy}/>
          <Route path='/animation' component={TestAnimation}/>
          <Route path='/detail/:id' component={Detail}/>
          {/*<Route path='/test' component={Test}/>*/}
          {/* render属性的作用：渲染一个路由组件*/}
          {/*<Route path='/auth' render={() => {
            return (
              <div>
                <div>TOM</div>
                <div>JERRY</div>
              </div>
            )
          }}/>*/}
          <AuthCheck path='/test' component={TestAuth}/>
          <AuthCheck exact path='/rent' component={Rent}/>
          <AuthCheck path='/rent/add' component={RentAdd}/>
          <AuthCheck path='/rent/search' component={RentSearch}/>
          <Route component={NotFound}/>
        </Switch>
+      </Suspense>
    </BrowserRouter>
    

src/index.css中

.globalLoading {
    text-align: center;
    padding-top: 100px;
    font-size: 30px;
   color: orange;
 }

效果-组件正在加载

原文链接:https://blog.csdn.net/weixin_44867717/article/details/117433783