打包优化——修改脚手架配置说明 & 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;
}
效果-组件正在加载