本文分享react项目的打包优化， 项目使用create-react-app创建。不做任何优化时打包体积过大，首页渲染十分缓慢。 使用webpack-bundle-analyzer查看打包chunck的内容，使用方式如下：
yarn add webpack-bundle-analyzer yarn add cross-env在package.json配置命令
"scripts": { "start": "node scripts/start.js", "build": "node scripts/build.js", "report":"cross-env npm_config_report=true node scripts/build.js", //新增，查看打包文件内容 "test": "node scripts/test.js" },通过分析，打包文件体积过大的原因主要有2点 1、react路由未按需加载 2、打包antd的icon时打包了所有icon文件
可从如下几方面进行优化 1、react路由实现按需加载 2、antd按需加载 3、分割icon文件，不全部导入
首先实现antd按需加载。查看antd官网配置
yarn add babel-plugin-import在package.json配置
"plugins": [ [ "import", { "libraryName": "antd", "style": "css" } ] ]路由按需加载
//使用高阶组件对路由组件进行包裹 import React, { Component } from 'react' export default function asyncComponent(importComponent) { class AsyncComponent extends Component { constructor(props) { super(props) this.state = { component: null } } async componentDidMount() { const { default: component } = await importComponent() this.setState({ component }) } render() { const C = this.state.component return C ? <C {...this.props} /> : null } } return AsyncComponent }使用方式
import asyncComponent from '../components/Boundle/Boundle' export default { path: '/userManage', component: asyncComponent(() => import('@/views/userManage/userManage.js')), exact: true, children: [ ] }路由按需加载实现完成。 icon文件按需导入 主要是利用webpack的alias 在webpack.config.js的alias进行如下配置 alias：{ ‘@ant-design/icons/lib/dist$’: path.resolve(__dirname, ‘…/src/icons.js’) } 在src目录下创建icons.js文件 该文件主要是导入使用到的icon。这样就不会把所有的icon文件引入了。
// export what you need export { default as SmileOutline } from '@ant-design/icons/lib/outline/SmileOutline' export { default as MehOutline } from '@ant-design/icons/lib/outline/MehOutline' // export what antd other components need export { default as CloseOutline } from '@ant-design/icons/lib/outline/CloseOutline' export { default as CheckOutline } from '@ant-design/icons/lib/outline/CheckOutline' export { default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline' export { default as CheckCircleOutline } from '@ant-design/icons/lib/outline/CheckCircleOutline' export { default as InfoCircleOutline } from '@ant-design/icons/lib/outline/InfoCircleOutline' export { default as CloseCircleOutline } from '@ant-design/icons/lib/outline/CloseCircleOutline' export { default as ExclamationCircleOutline } from '@ant-design/icons/lib/outline/ExclamationCircleOutline' export { default as CheckCircleFill } from '@ant-design/icons/lib/fill/CheckCircleFill' export { default as InfoCircleFill } from '@ant-design/icons/lib/fill/InfoCircleFill' export { default as CloseCircleFill } from '@ant-design/icons/lib/fill/CloseCircleFill' export { default as ExclamationCircleFill } from '@ant-design/icons/lib/fill/ExclamationCircleFill' export { default as UpOutline } from '@ant-design/icons/lib/outline/UpOutline' export { default as DownOutline } from '@ant-design/icons/lib/outline/DownOutline' export { default as LeftOutline } from '@ant-design/icons/lib/outline/LeftOutline' export { default as RightOutline } from '@ant-design/icons/lib/outline/RightOutline' export { default as RedoOutline } from '@ant-design/icons/lib/outline/RedoOutline' export { default as CalendarOutline } from '@ant-design/icons/lib/outline/CalendarOutline' export { default as SearchOutline } from '@ant-design/icons/lib/outline/SearchOutline' export { default as BarsOutline } from '@ant-design/icons/lib/outline/BarsOutline' export { default as StarFill } from '@ant-design/icons/lib/fill/StarFill' export { default as FilterOutline } from '@ant-design/icons/lib/outline/FilterOutline' export { default as CaretUpOutline } from '@ant-design/icons/lib/outline/CaretUpOutline' export { default as CaretDownOutline } from '@ant-design/icons/lib/outline/CaretDownOutline' export { default as PlusOutline } from '@ant-design/icons/lib/outline/PlusOutline' export { default as FileOutline } from '@ant-design/icons/lib/outline/FileOutline' export { default as FolderOpenOutline } from '@ant-design/icons/lib/outline/FolderOpenOutline' export { default as FolderOutline } from '@ant-design/icons/lib/outline/FolderOutline' export { default as PaperClipOutline } from '@ant-design/icons/lib/outline/PaperClipOutline' export { default as PictureOutline } from '@ant-design/icons/lib/outline/PictureOutline' export { default as EyeOutline } from '@ant-design/icons/lib/outline/EyeOutline' export { default as DeleteOutline } from '@ant-design/icons/lib/outline/DeleteOutline' export { default as StockOutline } from '@ant-design/icons/lib/outline/StockOutline' export { default as BookOutline } from '@ant-design/icons/lib/outline/BookOutline' export { default as TeamOutline } from '@ant-design/icons/lib/outline/TeamOutline' export { default as OrderedListOutline } from '@ant-design/icons/lib/outline/OrderedListOutline'至此基本优化介绍完毕。
