环境HBuilderX 4.36 / uni-app Vue3(Vite) / 小米12X (Android 13)痛点旧项目首屏1.4s包体积超限低端机卡顿。一、坑 1条件编译别只写在 Vue 层Vue2 时代习惯用process.env但在 Vite 构建体系下这会导致 Tree-shaking 失效。必须把平台差异下沉到 Hooks 层。错误写法导致 H5 编译失败// utils/privacy.ts export const getPrivacy () { wx.getPrivacySetting({}) // H5 端 wx is not defined }正确写法全链路条件编译// hooks/usePrivacy.ts import { ref } from vue export const usePrivacy () { const needAgree ref(false) // #ifdef MP-WEIXIN wx.getPrivacySetting({ success: (res) { needAgree.value res.needPrivacy } }) // #endif // #ifdef H5 needAgree.value false // H5 端无需微信隐私协议 // #endif return { needAgree } }原理uni-app 编译器在编译到 H5 时会直接删除#ifdef MP-WEIXIN包裹的代码块实现真正的物理隔离。二、坑 2Pinia 持久化引发的 180ms 白屏购物车数据需要持久化最初直接配置了persist: true结果在冷启动时有明显的卡顿感。排查通过console.time打点发现uni.getStorageSync耗时异常。原因是 Pinia 插件默认会递归遍历整个 State包括计算属性和非序列化对象。优化方案关闭自动持久化手动控制序列化过程只存纯数据。// stores/cart.ts import { defineStore } from pinia import { ref, computed } from vue export const useCartStore defineStore(cart, () { const items refany[]([]) // 计算属性不参与存储避免序列化开销 const totalPrice computed(() items.value.reduce((t, i) t i.price * i.count, 0) ) // 初始化仅读取纯数据 const init () { try { const localData uni.getStorageSync(cart_v2) if (localData) items.value JSON.parse(localData) } catch (e) { console.error(Cart parse error:, e) } } // 保存只存 items 数组 const save () { uni.setStorageSync(cart_v2, JSON.stringify(items.value)) } init() return { items, totalPrice, save } }, { persist: false // 关键关闭默认持久化 })性能对比方案冷启动耗时 (onLoad)内存占用默认全量持久化180ms高手动 Pick 关闭默认​62ms​低​三、坑 3长列表分包 虚拟列表的必要性商品列表页 60 个卡片每个带 3 张 SKU 图。如果不做优化即使分包了运行时渲染压力依然巨大。优化路径单包全量白屏 1.4s包体积 2.83MB超限。仅分包白屏 820ms滚动掉帧。分包 uni-list虚拟滚动白屏620ms滚动丝滑。核心代码template !-- 必须指定固定高度否则虚拟滚动失效 -- view styleheight: 100vh; uni-list :datagoodsList :height600 :row-height128 :buffer-size10 template #default{ item } GoodsCard :itemitem / /template /uni-list /view /template script setup langts import { ref } from vue const goodsList ref([]) // 模拟获取数据 goodsList.value Array.from({ length: 60 }).map((_, i) ({ id: i, name: 商品${i}, price: 99.9 })) /script避坑H5 端需配合scroll-viewiOS Safari 需设置enhanced属性防止抖动。四、坑 4iOS 键盘顶起布局的修复登录页点击输入框iOS 键盘弹起会将底部按钮顶飞。原因是 iOS Webview 将键盘算入了视口高度。解决方案使用page-meta动态监听。template page-meta :page-style--kbh: ${keyboardHeight}px; / view classfooter :style{ bottom: keyboardHeight px } button提交/button /view /template script setup langts import { ref } from vue const keyboardHeight ref(0) uni.onKeyboardHeightChange(res { keyboardHeight.value res.height }) /script