公众号首页白屏问题探索

政文君
624 阅读2分钟

第一篇文章, 记录一下公众号碰到的一些问题, 及解决办法, 并不是只有白屏问题, 因为白屏问题困扰我时间最长, 所以把它当做标题.

简单介绍一下公众号的情况, 某医院使用的挂号系统, 从功能上来说, 没有实现的难点, 但是关注的人数比较多, 接近20万, 所以对于兼容性的要求比较高. 前端选择的框架是vue, 组件库vant. 项目的架子是两年前搭建的

本章内容都是靠记忆写出来的, 实际操作因为时间比较长有点忘了, 有些地方只写了个大概或者思路, 具体操作的话, 直接百度就好.

问题一: 在配置好微信公众号菜单后, 首次点击菜单进入公众号极慢, 要白屏一分钟多才能进去, 十分影响体验, 如何解决?

分析: 使用微信开发者工具发现, vendors~index文件太大, 2.3MB, 主要是加载这个文件太慢导致.

解决办法: 这个包是项目的第三方依赖文件打包而成, 主要解决办法有以下几种

  1. 查看项目依赖文件, 看看是否真正用了, 比如这个项目就引用了一堆没用的东西, 比如element-ui, echart, 而且在页面中没有使用, 在去掉后, 再打包, 一下这个文件就小了一半, 但是首次进入, 还是比较慢

  2. 使用 gzip 压缩.

    安装compression-webpack-plugin, 然后在webpack配置文件里开启 gzip压缩, 最后在前台服务器的 nginx.conf文件中添加相应配置如下, 再重启nginx, 大功告成

       const productionGzipExtensions = ['js', 'css'];
   
   // 开启 gzip, 写在plugins里面
   new CompressionWebpackPlugin({
       asset: '[path].gz[query]',
       algorithm: 'gzip',
       test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
       threshold: 10240,
       minRatio: 0.8
   })
   
   # gzip配置
   gzip  on;
   gzip_disable "msie6"; #不使用gzip IE6
   gzip_min_length 100k; #gzip压缩最小文件大小，超出进行压缩（自行调节）
   gzip_buffers 4 16k; #buffer 不用修改
   gzip_comp_level 6; #压缩级别:1-10，数字越大压缩的越好，时间也越长
   gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; #  压缩文件类型
   gzip_vary off;  #跟Squid等缓存服务有关，on的话会在Header里增加 "Vary: Accept-Encoding"

再查看打包后的文件 270kb左右, 加载时间也在接受范围之内, 基本达成了目标!

如果这样还是比较大, 那么还有第三招, 就是使用 splitChunks 拆分, 把比较大的第三方库, 单独打包成一个文件, 如下, 就把vant单独拆了出来, 基本是可以实现首次加载不会长时间白屏的需求.

config.optimization = {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,    // 大于30k, 才会被单独打包出来
      maxSize: 0,
      minChunks: 1,
      name: true,
      cacheGroups: {
        vendors: {
          name: "chunk-vendors",
          test: /[\\/]node_modules[\\/]/,
          chunks: "initial",
          priority: 1,
          reuseExistingChunk: true,
          enforce: true
        },
        vant: {
          name: "chunk-vant",
          test: function (module) {
            return module.resource &&
            module.resource.includes(`vant`);
          },
          chunks: "all",
          priority: 2,
          minChunks: 1,
          reuseExistingChunk: false,
        },
      }
    }
  };

问题二: 部分老版本ios上loading一直转, 不消失, 不是所有的老版本ios, 多出现于6s, 有些升级系统之后好了, 有些升级还是不行, 本地无法复现, 怎么办? loading是vant的Toast.loading组件.

分析: 这个问题困扰了我一阵, 因为复现不了, 不太好调查. 怀疑应该是清除弹窗代码没有生效, 仔细看如下代码, 不知道大家有没有发现问题

let loadingToast = Toast.loading({duration: 0, mask: true, message: '加载中...' });
let that = this;
that.$http.post(urlConfig.getDoctorDetails,{
    doctorId: that.$route.query.doctorId,
    doctorName: that.$route.query.doctorName,
    deptCode: that.$route.query.deptCode,
    deptName: that.$route.query.deptName
}).then(function(response){
    if(response.data.code == '200'){
        if(response.data.data){
            that.returnData = response.data.data.doctorDetailResp;
        }
    }else{
        Toast(response.data.msg)
    }
}).finally(function (){
    loadingToast.clear();
})

不知道大家是否发现了问题, 就是这个finally, 部分ios不兼容这个方法, 所以去掉loading的代码没有生效, 就一直在转!!!

问题找到了, 就比较好改了, 下载 promise.prototype.finally 这个兼容finally的东西, 然后在入口js中加入

require('promise.prototype.finally').shim();

果然, 重新发布后, 这种问题就消失了.

问题三: 部分ios系统在发布新版本后, 必须手动刷新, 不然还是旧版本, 咋回事?

写的太累了, 下次再写

avatar
文章
阅读
粉丝