SilenceAdam

发布：2020-07-23 18:01
更新：2023-09-05 20:12
阅读：3351

【急需解决】dcloud下 cdn 图片加载太慢，严重影响使用！导致我们 APP 长时间白屏！

分类：uni-app

DCloud uniapp uni_app

问题场景

我们 APP 中的 H5页面就是用 uni-app 写的，在我们用户量很大的情况下，IOS 版本每次打开这个页面都超级慢，有时白屏甚至十几秒，而 Android 版本则不会有白屏问题。

定位问题

在对 IOS 版本抓包时发现，有一个图片（https://cdn.dcloud.net.cn/img/shadow-grey.png）加载很慢，每次都是等这张图片加载完之后，页面才渲染。

分析原因

越多人使用 uni-app 开发的产品，就会有越多人请求这张图片（https://cdn.dcloud.net.cn/img/shadow-grey.png），对dcloud的 cdn 服务器的压力就越大，图片请求的就越慢！随着 uni-app 的发展壮大，这个问题只会更严重。
我们 APP 的 IOS 版本中 WebView 加载机制的问题， WebView 会等所有静态资源加载完之后，才去渲染页面！也就意味着，这张图片（https://cdn.dcloud.net.cn/img/shadow-grey.png）加载的越慢，我们 APP 的白屏问题就越严重。

临时解决方案

方案一：：修改uni-app源码，找到node_modules/@dcloudio/uni-cli-shared/lib/platform.js，将getShadowCss方法的返回值修改为空字符串。

但是每次更新uni-app 依赖包时，还得再手动修改一次，在我们某次更新完依赖包时忘记修改，导致线上环境再次出现长时间空白屏问题，搞得我们苦不堪言。

方案二：更改IOS 版本WebView 加载机制，目前被 IOS 研发人员告知无法修改，所以该方案走不通！

建议的解决方案

还是得请 uni-app 研发人员重视这个问题，看能不能把图片之类的静态资源放在项目目录里，不要再用你们的cdn 了，一来对你们 cdn 压力过大，二来我们用的也是苦不堪言！还请重视该问题！感激不尽！

2020-07-23 18:01 负责人:无分享

7 个回复

raise

此话当真？@一下官方的人呀

8***@qq.com

目前遇到同样的问题，现象一样，官方给的处理方案行不通！
https://ask.dcloud.net.cn/question/89143

这个方案的处理只是解决了直接打开h5页面不加载这个图片，在ios端还是会加载的

8***@qq.com

index.css文件中：

body::after {

position: fixed;

content: '';

left: -1000px;

top: -1000px;

-webkit-animation: shadow-preload .1s;

-webkit-animation-delay: 3s;

animation: shadow-preload .1s;

animation-delay: 3s

}

@-webkit-keyframes shadow-preload {

0% {

background-image: urlhttps://cdn.dcloud.net.cn/img/shadow-grey.png

}
```
100% {  

    background-image: urlhttps://cdn.dcloud.net.cn/img/shadow-grey.png  

}  
```
}

@keyframes shadow-preload {

0% {

background-image: urlhttps://cdn.dcloud.net.cn/img/shadow-grey.png

}
```
100% {  

    background-image: urlhttps://cdn.dcloud.net.cn/img/shadow-grey.png  

}  
```
}

这段代码引起的，通过template.h5.html重写处理了下，让ios同事验证可以了

2020-07-24 10:46

8***@qq.com

             100% {  

                 background-image: none;  

             }  

         }  



         @keyframes shadow-preload {  

             0% {  

                 background-image: none;  

             }  



             100% {  

                 background-image: none;  

             }  

         }  

    </style>  

</head>

2020-07-24 10:47

SilenceAdam (作者)

回复 8***@qq.com: 多谢兄弟！我试试！

2020-07-24 15:39

DCloud_UNI_GSQ

使用的是UIWebView还是WKWebView，另外H5地址能否私信提供一下，我这边测试看看。

SilenceAdam (作者)

IOS 版本使用的是WKWebView，H5页面我们现在是暂时修改源码，把图片地址删除了，线上 H5 页面不会再请求这个图片了。稍等一会，我把源码恢复了，再打个包，发预生产给你看，一会 H5 地址私发你！麻烦了！

2020-07-24 10:21
SilenceAdam (作者)

H5 地址已私发，请查收！谢谢！

2020-07-24 10:56

1***@qq.com

一年半过去了还是没给解决真的让人无语了@DCloud_UNI_GSQ

阳东 - 阳东东

三年过去了还没解决吗

btbrad

还没解决！

m***@yeah.net

可以使用自定义插件在编译后的文件中删除cdn资源引用源码的方式解决：
在根目录添加 "vue.config.js" 文件并配置以下代码：

module.exports = {  
  configureWebpack: (config) => {  
    // 编译后删除css文件里自带的uni-app资源引用  
    config.plugins.push(function (compiler) {  
      const pathReg = /\s*background(-image)?:\s*url\(\S*?\/\/[\w\.-]*?dcloud.net.cn\S*?\);?[ \t]*/gi  
      const eachReplace = (dirPath) => {  
        fs.readdirSync(dirPath, { withFileTypes: true }).forEach(dirent => {  
          const filePath = path.join(dirPath, dirent.name)  
          if (dirent.isDirectory()) {  
            eachReplace(filePath)  
          } else if (dirent.isFile() && /.(c|ac|wx)ss$/.test(dirent.name)) {  
            try {  
              const fileData = fs.readFileSync(filePath, 'utf8')  
              if (pathReg.test(fileData)) {  
                fs.writeFileSync(filePath, fileData.replace(pathReg, ''), 'utf8')  
              }  
            } catch (e) {}  
          }  
        })  
      }  
      compiler.hooks.done.tap('removeUniCdnPath', eachReplace.bind(null, process.env.UNI_OUTPUT_DIR))  
    })  
  }  
}

m***@yeah.net

使用此方法除生产编译或小程序模式外，启动H5模式的dev本地服务时可能会有问题，建议用 if (process.env.NODE_ENV === 'production' || process.env.UNI_PLATFORM !== 'h5') { ... } 包裹执行的代码。

2023-09-05 21:07

要回复问题请先登录或注册

【急需解决】dcloud下 cdn 图片加载太慢，严重影响使用！导致我们 APP 长时间白屏！

问题场景

定位问题

分析原因

临时解决方案

建议的解决方案

7 个回复

公告

相关问题

【急需解决】dcloud下 cdn 图片加载太慢，严重影响使用！导致我们 APP 长时间白屏！

问题场景

定位问题

分析原因

临时解决方案

建议的解决方案

与内容相关的链接

7 个回复

公告

相关问题