记一次umi调优过程

前端小学生,轻喷

项目背景

某机构某中心的一个微信系统,公众号关注者大百万级,这一期上线一个单页应用

项目采用前后台分离模式,SpringBoot+umijs+antd-mobile,因为是长线项目,很多应用都集中到了一套程序中,以至于本次单页应用页面加载资源过大,gzip后高达1M。

对于用户量少的系统,1M不算大,但是对于这个量级的应用,1M很恐怖,尤其是集中访问时,假设100万用户访问,下载数据就是1T,而且由于某些原因,没法用CDN,且不说访问会慢,势必会影响到核心系统的访问。

调优思路

  • 首先,umi的优势在于开箱即用,插件化开发、按需加载,本身已是个很优秀的框架,可以优化的地方也不多,插件配置如下(umi2.10.7):
    1.png
  • 通过umi命令分析(set ANALYZE=1 && umi build),找出较大的包,分析结果见下图,可知vendor.js和umi.js占了大头
    2.png
  • 由于项目把所有模块都集中到了一起,便于开发及维护,这也导致了项目所有第三方插件都聚合到了一起,越来越多。两个思路

    • 将第三方插件从vendor.js里移除来,页面按需加载
    • 拆分项目,把这次用到的页面单独抽一个项目打包,然后用nginx代理。

拆分项目

  • 优点:操作起来相对简单,不涉及底层修改,只需要把该应用涉及的页面抽离出来,把用到的模块复制过来。
  • 缺点:如果应用复杂,复用组件较多,就需要多次同步维护,很容易遗漏出错。
  • 方法:

    • 将应用抽出来后,.umirc.js中设置base及publicPath为子目录,如下图:
      3.png
    • 配置nginx,如下图
      4.png

      • 注意location要加^~,规则如下:

            > location [=|~|~*|^~] /uri/ { … }
            > = 开头表示精确匹配
            > ^~ 开头表示uri以某个常规字符串开头,理解为匹配 url路径即可。nginx不对url做编码,因此请求为/static/20%/aa,可以被规则^~ /static/ /aa匹配到(注意是空格)。
            > ~ 开头表示区分大小写的正则匹配
            > ~* 开头表示不区分大小写的正则匹配
            > !~和!~*分别为区分大小写不匹配及不区分大小写不匹配 的正则
            > / 通用匹配,任何请求都会匹配到。
        
      • try_files配置的是url路径,不是目录路径,最后要fallback到子目录下的index.html

            `try_files $uri $uri/ /wx/index.html;`
        

vendor.js按需加载

正在测试,不过配置后确实有效果,新的analyze结果如下,下周测试后再更。

5.png

[测后更新]
vendor.js的确减少了很大体积,因为把一些第三方抽成了独立的js和css。
但是umi.js依然很大,官方也提供了一种思路,比如把antd改为远程调用(参考该链接),远程调用减少了服务器的带宽压力,但也存在着客户端加载资源较大的问题。

Springbootuminginxantdantd-mobiledvareact