uniapp开发微信小程序体积分析与优化

一、为什么要优化

启动性能优化最直接的手段是降低代码包大小，代码包大小直接影响了下载耗时，影响用户启动小程序时的体验。

二、体积分析

点击微信小程序右上角->基本信息->本地代码->代码依赖分析，查看依赖图：

代码总体积15.11MB

lQLPJwuPV_ukLJjNAirNBZ6wMI_VUqPMJTsEEkzFzYAEAA_1438_554.png

二、优化措施简述

图片压缩
静态资源上传远程服务器，使用CDN访问
代码分包，将主包体积降至1.5MB以下，分包单个不超过2MB

三、详细操作

1. 图片压缩

使用图片压缩工具将大体积图片进行压缩：

压缩后代码总体积7.98MB：

2. 图片上传服务器

将本地静态资源上传服务器，程序中使用链接进行访问：

// common/setting.js
module.exports = {
    img_base_url: 'https://xxx/xxx/images'
}

可将路径注册到Vue原型上，通过this访问：

// main.js
import Vue from 'vue'
import { img_base_url } from '@/common/setting.js'

Vue.prototype.$img_base_url = img_base_url

<template>
    <view>
        <image :src="img_base_url + 'xxx.png'"></image>
    </view>
</template>

<script>
import { img_base_url } from '@/common/setting.js'
export default {
    data () {
        img_base_url
    },
    created () {
        console.log(img_base_url, this.$img_base_url)
    }
}
</script>

上传服务器后代码总体积2.66MB：

3. 代码分包

首先在manifest.json文件中，将对应的平台设置加入"optimization": { "subPackages": true } 来开启分包选项：

// manifest.json
{
    "mp-weixin" : {
        "optimization": {
            "subPackages": true
        }
    }
}

下面分离出pages主包内的几个模块，和pages目录在同级，分包名以page_开头作为区分。

{
    "pages": [{
                "path": "pages/login/login",
                "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                },
              },
              // 将主包中的路劲分到下面"subPackages"中
              // {
              //   "path": "hiddenMgr/hiddenMgr",
              //   "style": {
              //           "navigationBarTitleText": "隐患管理"
              //   }
              // },
              // {
              //   "path": "hiddenAdd/hiddenAdd",
              //   "style": {
              //           "navigationBarTitleText": "隐患新增"
              //   }
              // }
    ],
    "subPackages": [{
            // 分包A
            "root": "page_hidden",
            "pages": [{
                            "path": "hiddenMgr/hiddenMgr",
                            "style": {
                                    "navigationBarTitleText": "隐患管理"
                            }
                      },
                      {
                            "path": "hiddenAdd/hiddenAdd",
                            "style": {
                                    "navigationBarTitleText": "隐患新增"
                            }
                      }
                 ]
        },
        {
            // 分包B
            "root": "page_defect",
            "pages": [{ ... }]
        }
}

分包后代码体积2.61MB, 主包体积2.47MB：

点击真机调试，显示代码包1181KB（可能经过一层压缩）：

四、总结

除了以上几点，另外还可考虑的操作的有代码压缩、source-map配置、代码层面的封装和复用等等。最显著的还是静态资源的处理。