umi配置webpack_基于umi、antd的前端工程优化实践

傷城~ 2023-01-04 14:36 1246阅读 0赞

> umi是蚂蚁金服推出的一个围绕React技术栈的前端框架，目前它已经成为我在项目中必不可少的一部分，再配合antd的UI组件库能极大提高项目的开发效率。今天我想谈一谈在前端领域中有哪些优化的策略可以提升用户体验。

本篇文章使用的umi版本是2.x，antd版本是3.x，新版umi和antd可能会影响下面的配置方式。

优化这个词对我来说可能太过空洞，毕竟项目本身也没大到出现很严重的性能问题，我只是根据现有的情况来分析有哪些可以尝试着去优化，而优化后能达到什么效果，也只有实践之后才知道了。

对于一个SPA应用，我觉得大家最关心的应该是页面的首屏加载速度，所以就把这个作为这次优化的第一个目标，看看通过折腾到底能提升多少速度。

我想到的第一个策略是减小打包后的代码体积，那总得让我先看看这个项目到底用到了哪些代码吧，到底哪些代码占用了太多，然后是不是可以删掉这些代码。这时候webpack就出场了，它提供的webpack-bundle-analyzer可以帮助我们分析打包后的代码组成。因为umi内置了这个功能，所以可以很方便地直接运行npm run analyze（windows用户可能需要使用cross-env来识别环境变量）查看。

// package.json
    {
         
      "scripts": {
         
        "analyze": "ANALYZE=1 umi build"
      }
    }

## 一、Antd的精简之路 ##

**1.抛弃moment**

分析后发现antd相关的代码占了项目代码很大比例，这一点很正常，毕竟我们使用antd作为ui组件库，即使使用了按需加载的功能，也阻挡不了它在我们项目中的比重。那antd有没有可以优化的地方呢？答案当然是有的。antd中的DatePicker组件使用了moment.js作为时间相关的工具库，moment.js在代码中占了344.98KB，这其中还包括语言相关的文件287.42KB，然而我的项目只是需要用到中文，其他语言对我来说不重要，所以该如何删除不需要的这部分代码呢？umi中有一个专门的属性可以帮到我们。

// .umirc.js
    export default {
         
      ignoreMomentLocale: true,
    }

这个方法帮我们删除了moment的locale相关文件，但是moment本身还是存在的，所以为了把优化进行到底，让我们直接把moment也删了吧。这里就要说到一个新的日期库dayjs了，它gzip之后的体积仅仅只有2KB，非常符合我们的需求，但是antd本身依赖的是moment，该如何把它替换成dayjs呢，其实antd design官方还真提供了一个webpack插件antd-dayjs-webpack-plugin做这件事，这边简单讲一下替换方案。

下载插件后，配置一下umirc.js，通过weboack-chain添加插件。这边要注意的是antd3.x一定要加上下面的preset。

export default {
      chainWebpack(config) {
        // antd moment -> dayjs
        config.plugin('moment2dayjs').use('antd-dayjs-webpack-plugin', [
          {
            preset: 'antdv3'
          }
        ])
      }
    }

如果项目中需要使用中文语言，还要引入dayjs的中文语言包并与antd的ConfigProvider配合服用。

// 设置dayjs中文
    import dayjs from 'dayjs'
    import 'dayjs/locale/zh-cn'
    dayjs.locale('zh-cn')
    
    import {
          ConfigProvider } from 'antd'
    import zhCN from 'antd/lib/locale-provider/zh_CN'
    export default ({
         children}) => <ConfigProvider locale={
         zhCN}>{
         children}</ConfigProvider>

通过上述配置后，使用DatePicker组件拿到的日期与之前一致，但可以直接使用dayjs的API操作日期，moment不复存在。最终dayjs打包体积为14.64KB，减小了330KB之多。

**注：**目前dayjs@1.8.20后有个bug会导致替换后WeekPicker显示不正常，**1.8.26版本已修复**。

**2.Icon的“按需加载”**

解决了moment的问题，我们还能发现antd中引入的图标库@ant-design/icons占用了488.8KB，在Icon组件中可以看到它全量引入了该图标库，而事实上我在项目中使用的图标都是iconfont上的，图标库里需要用到的图标基本是antd组件自己使用的，因此这里应该有很大的优化空间。

import * as allIcons from '@ant-design/icons/lib/dist';

现在需要解决的问题是如何让图标库进行按需加载，antd4.x组件内部通过单独引入某个图标解决了这个问题，但是antd3.x组件引入图标的方式限制了我们按需加载的想法。

// antd3.x
    import Icon from '../icon';
    
    <Icon type="loading" />
    
    // antd4.x
    import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
    <LoadingOutlined />

参考资料发现了一个方法，使用webpack的alias配置重新定义图标库模块的路径，让它指向我们自己创建的文件，然后在文件中手动引入需要的图标，从而实现按需加载。根据我自己对图标的使用定位，符合我的需要，只要前期定义好antd内部使用的图标，之后基本不需要再维护了。

在umi配置文件中设置alias属性，通过@ant-design/icons/lib/dist$精准替换在index.tsx下的图标模块。

// .umirc.js
    export default {
         
      '@ant-design/icons/lib/dist$': path.resolve(__dirname, '/path/to/icon.js')
    }

在自己的icon.js中按需增加需要的图标，我自己大致整理了20来个图标。

export {
          default as LoadingOutline } from '@ant-design/icons/lib/outline/LoadingOutline'

再次打包后，icon库的体积被缩小到了13.22KB，减少475.58KB。

通过上面两个步骤一共减少了800KB，在本地测试后发现文件下载速度提高了100ms左右。

To Be Continued...