umi request 地址参数_umi前端项目优化

页面加载的速度快慢，决定这用户对产品的第一印象，怎样能够更快的加载处理内容，以下是我近期项目优化的总结

一、资源压缩

1. 静态文件压缩
   通过控制台查看静态资源 js、css、img图片这些资源的大小和加载时间，图片可用压缩工具进行压缩。

2.OSS图片压缩
我们通常通过接口拿到的图片地址都是原图片地址，即上传图片多大拿到的就是多大，但我们需要根据不同情况给这些图片进行限制，不然每次加载原图就很影响加载速度，所有在这边我们需要根据情况对使用的 oss 图片的地方都有加上限制， 这里我以企业logo作为例子：
企业图片按照设计稿宽高 45*24，在拿到图片地址后按照如下方式拼接 logoUrl?x-oss-process=image/resize,m_mfit,h_24,w_45，这里的拼接意思为等比缩放，宽度 45 高度24；更加详细的配置可参考OSS 图片缩放文档。

OSS参数配置

对比结果如下：图片有232Kb 变为 1.6K

优化前

优化后

二、压缩npm包

使用umi框架的平台可以直接输入命令 npm run analyze 就可以启动npm 包分析工具，对我们系统使用到的包进行分析，下图是FPF web打包情况，其中 xlsx 和 @antv g2这两个包非常大打包后都有 320+ Kb，比功能模块包都还要大很多，在代码层面这两个包分包是提供前端下载功能和图表功能，但图表通过只有一个地方使用（当前该模块已改版也未使用），根据实际情况我们可以要求下载功能统一由后端接口提供前端不做处理，图表功能由于使用功能并不复杂可考虑自己手写，这样即可剔除这两个包；实践表明在生产环境剔除 antv g2 后 umi.js 由 2.4Mb 减少为 2.2Mb，效果还是很明显的。

三、减少请求

1. 枚举提供统一接口并且支持批量查询，避免频繁查询枚举接口
2. 使用字体图标代替小图标，可以使用 iconfont 进行管理

四、拆包

在plugin.config.js 新增 splitChunks 配置，将基础框架打包成一个文件，其它文件异步加载

#

在config.js文件新增 chunk配置

chunk: ['vendors', 'async-commons', 'commons']