uni-app uni.preload 加载多个首页tab时真机调试tab切换流畅 云打包后tab切换会卡住

uni-app uni.preload 加载多个首页tab时真机调试tab切换流畅 云打包后tab切换会卡住

开发环境 版本号 项目创建方式
Mac macOS 11.2.3 HBuilderX 
产品分类：uniapp/App

PC开发环境操作系统：Mac

PC开发环境操作系统版本号：macOS Big Sur 11.2.3

HBuilderX类型：正式

HBuilderX版本号：3.1.22

手机系统：iOS

手机系统版本号：IOS 14

手机厂商：苹果

手机机型：iPhone 12

页面类型：nvue

打包方式：云端


示例代码：

```javascript
<script>  
import Vue from 'vue'  
import AppCache from '@/utils/app-cache'  
import { init } from '@/utils/app'  
import { PAGES } from '@/common/constants/map'  

export default Vue.extend({  
  mpType: 'app',  
  globalData: {  
    cache: AppCache  
  },  
  async onLaunch() {  
    try {  
      const start = Date.now()  
      await init(this.$store.dispatch)  
      console.log(`app 初始化完毕: ${Date.now() - start}ms`)  
      closeSplash()  
    } catch (e) {  
      closeSplash()  
    }  
    setTimeout(() => {  
      uni.preloadPage({ url: PAGES.POPUP })  
      uni.preloadPage({ url: PAGES.TABBAR_SHOP })  
      uni.preloadPage({ url: PAGES.TABBAR_MINE })  
      uni.preloadPage({ url: PAGES.TABBAR_CENTER })  
      uni.preloadPage({ url: PAGES.TABBAR_POINTS })  
      uni.onTabBarMidButtonTap(() => uni.navigateTo({ url: PAGES.TABBAR_CENTER }))  
      console.log('uni.preloadPage 完毕')  
    }, 1000)  
  },  
  onShow() {  
    // console.log('onShow')  
    setTimeout(() => {  
      this.$store.dispatch('system/updateRemind') // 显示应用时，检查红点  
    }, 3000)  
  }  
})  
</script>

操作步骤： uni.preload 加载多个首页tab时，真机调试tab切换流畅，云打包后，tab切换会卡住

预期结果： uni.preload 加载多个首页tab时，真机调试tab切换流畅，云打包后，tab切换流畅

实际结果： uni.preload 加载多个首页tab时，真机调试tab切换流畅，云打包后，tab切换卡顿

bug描述： uni.preload 加载多个首页tab时，真机调试tab切换流畅，云打包后，tab切换会卡住


更多关于uni-app uni.preload 加载多个首页tab时真机调试tab切换流畅 云打包后tab切换会卡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app uni.preload 加载多个首页tab时真机调试tab切换流畅 云打包后tab切换会卡住的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题通常是由于云端打包时的代码压缩和优化导致的性能差异。真机调试时使用的是未压缩的代码，而云打包后会进行代码压缩和资源优化，这可能会影响页面预加载的性能。

主要可能的原因和解决方案：

  1. 预加载时机问题：在onLaunch中使用setTimeout延迟1秒执行预加载，这个时机可能不够理想。建议将预加载逻辑放在onShow中，或者使用更精确的时机控制。

  2. 预加载页面过多：一次性预加载5个页面（包括4个tab页面和1个弹窗页面）可能会导致内存压力。云打包后的应用在资源加载和内存管理上可能与调试环境不同。

  3. nvue页面特性：nvue页面使用原生渲染，预加载多个nvue页面可能会占用较多原生资源。建议：

    • 减少预加载的页面数量
    • 或者改为按需预加载

  4. 代码优化建议：

// 可以尝试分批预加载
setTimeout(() => {
  // 先预加载必要的页面
  uni.preloadPage({ url: PAGES.POPUP })
  uni.preloadPage({ url: PAGES.TABBAR_SHOP })
  
  // 延迟加载其他页面
  setTimeout(() => {
    uni.preloadPage({ url: PAGES.TABBAR_MINE })
    uni.preloadPage({ url: PAGES.TABBAR_CENTER })
    uni.preloadPage({ url: PAGES.TABBAR_POINTS })
  }, 500)
}, 1000)
回到顶部