uniapp的优化

代码与资源优化

使用分包加载功能拆分主包体积，将非首屏必需的模块配置为分包。修改manifest.json中的分包配置：

"subPackages": [{
  "root": "subpackage",
  "pages": ["pages/sub/page1"]
}]

压缩静态资源，图片使用tinypng等工具压缩至webp格式，音频视频转H.265编码。开启代码压缩混淆，在vue.config.js中配置：

module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true
    }
  }
}

渲染性能提升

避免在模板中使用复杂表达式，改用计算属性。减少大列表渲染，使用<recycle-list>组件或第三方虚拟滚动插件。高频触发的函数使用防抖处理：

import { debounce } from 'lodash-es';
methods: {
  search: debounce(function(){...}, 500)
}

合理使用v-if和v-show，频繁切换的节点用v-show，运行时条件用v-if。动画效果优先使用CSS3实现，硬件加速属性如transform: translateZ(0)。

数据与请求优化

接口数据缓存策略，使用uni.setStorageSync存储时效性低的数据。合并高频接口请求，采用GraphQL或BFF层聚合。开启HTTP/2复用连接，添加请求取消功能：

const task = uni.request({...})
task.abort()

使用uni.preloadPage预加载目标页面资源，在onLoad阶段分步加载数据。大数据列表采用分页加载+骨架屏方案，下拉刷新与上拉加载实现无限滚动。

工程化配置

开启摇树优化(tree shaking)，第三方库按需引入。配置持久化缓存，修改manifest.json：

"networkTimeout": {
  "request": 30000,
  "connectSocket": 30000
}

使用自定义组件代替频繁使用的复杂模板，通过easycom自动导入组件。生产环境关闭sourcemap和调试器，启用Gzip压缩和CDN加速静态资源。