react项目打包优化

本文分享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'

至此基本优化介绍完毕。