Uniapp 打包体积增大与数组渲染异常排查指南

一、打包体积增大问题

排查步骤：

依赖分析
- 使用 npm run build:mp-weixin --report 生成依赖分析报告（微信小程序平台）
- 检查 node_modules 中是否引入冗余库（如未使用的 UI 组件库）
资源文件检查
- 静态资源（图片/字体）是否超过 100KB
- 是否使用未压缩的原始资源（如 PNG 代替 WebP）
代码结构审查
```
# 使用 CLI 分析模块大小
npx uniapp-cli inspect --mode production
```
- 检查全局组件是否未按需引入
- 验证 easycom 自动导入是否包含未使用组件

分包配置验证

检查 pages.json 分包配置是否生效：

"subPackages": [{
  "root": "subpackage",
  "pages": [...]
}]

解决方案：

资源优化
- 使用 image-compress 插件自动压缩图片
- 将静态资源托管至 CDN（修改 manifest.json 的 networkTimeout）

代码分割

动态导入非核心模块：

// 按需加载工具库
import('@/libs/heavy-module').then(module => {...})

构建配置优化

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.optimization.splitChunks({ 
      chunks: 'all',
      maxSize: 200000  // 单文件最大 200KB
    })
  }
}

清理未使用代码
- 安装 babel-plugin-lodash 实现 lodash 按需引入
- 使用 @dcloudio/uni-mini-plugin 自动移除未使用组件

二、数组渲染异常问题

排查步骤：

响应式原理验证

检查是否直接修改数组索引值：

// 错误示例（不会触发更新）
this.list[0] = newValue

渲染机制检查
- 使用 :key 绑定唯一标识（避免使用 index）：
```
<view v-for="(item,id) in list" :key="id">{{item.name}}</view>
```
异步更新验证
- 在 setTimeout/Promise 后调用 $forceUpdate()
- 检查是否在 onLoad 生命周期外修改数据
平台差异测试
- 分别在 H5/小程序端运行，确认是否为平台特异性问题

解决方案：

正确更新数组

// 方案1：使用 Vue.set
this.$set(this.list, index, newValue)

// 方案2：创建新数组
this.list = [...this.list.slice(0, index), newValue, ...this.list.slice(index+1)]

强制渲染机制

// 深度拷贝触发更新
this.list = JSON.parse(JSON.stringify(this.list))

// 使用 nextTick 确保渲染队列更新
this.$nextTick(() => { ... })

优化渲染性能

<!-- 使用虚拟滚动避免长列表卡顿 -->
<uv-virtual-list :list="largeArray" />

特殊场景处理

嵌套数组使用 deep: true 监听：

watch: {
  'nestedArray': {
    handler() { ... },
    deep: true
  }
}

三、系统优化建议

基础库升级
- 保持 @dcloudio/vue-cli-plugin-uni 最新版
- 定期运行 npm update 更新依赖

持续集成优化

# CI 配置示例 (GitLab CI)
build_job:
  script:
    - npm run build:mp-weixin -- --auto-subpackage
    - uniapp-cli upload --project ./dist/build/mp-weixin