胖蔡叨叨叨
你听我说

React使用Ant Design Pro框架导致首屏加载缓慢问题

存在问题

React项目中使用Ant Design pro框架,发现编译后前端应用的首屏加载过于缓慢,针对该问题,对改应用的生成包进行分析并优化,使其加载速度提升,用户体验更好。整个优化的思路过程如下。

1、网页登录后,首次刷新【存在路由】,加载时长过大,用户体验不佳

0
0

存在的相关关键指标:

  • DOMCOntentLoaded:7.32s
  • Load:32.21s
  • Finish:32.90s
  • layout.async.js:23.29s
  • misc.async.js:14.53s

解决思路

根据上面出现的问题分析可以通过如下几个方面对包的大小和加载的必要性进行拆分优化:
  1. 拆出页面包
  2. 裁剪vendors,将@ant-design、antd、docx包单独拆出一个文件,降低load的响应时间,
  3. 替换@ant-design/chats 为 @antv/g2plot,减少可视化组件包的大小
const webpackPlugin = config => {   // optimize chunks   config.optimization // share the same chunks across different modules     .runtimeChunk(false)     .splitChunks({       // chunks: 'async',       name: 'vendors',       chunks: 'async',       minSize: 20000,       minChunks: 1,       maxAsyncRequests: 30,       maxInitialRequests: 30,       cacheGroups: {         vendors: {           test: module => {             const packageName = getModulePackageName(module) || '';             // console.log('get splitChunks vendors:',packageName)             if (packageName) {               return [                 '@antv',                 '@ant-design',                 'antd',                 'docx',                 'l7',                 'gg-editor-core',                 'bizcharts-plugin-slider',               ].includes(packageName);             }             return false;           },           name(module) {             const packageName = getModulePackageName(module);             if (packageName) {               // console.log('get splitChunks name:', packageName);               if (['@ant-design', 'antd'].indexOf(packageName) >= 0) {                 return 'ant-design'; // visualization package               } else if (['docx'].indexOf(packageName) >= 0) {                 // 单独拆开                 return 'docx';               }             }             return 'misc';           },         },       },     }); };

结果

1、gzip降低

22165adbf146e2b
原始的
51433a6450391ca
总包大小以及layout.async.js、vendors.async.js大小均有显著缩小

2、请求数据

cd2907c13172429

存在的相关关键指标:

  • DOMCOntentLoaded:7.72s
  • Load:13.96s
  • Finish:14.68s
  • misc.async.js:3.57s
  • umi.js:7.30s
赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » React使用Ant Design Pro框架导致首屏加载缓慢问题
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏