小程序 - 包大小分析

• 编译环境

"@f-loat/mpvue-loader": "^1.0.0",
"mpvue-entry": "^1.4.0",
"webpack-mpvue-asset-plugin": "^0.0.2"
// 当前版本较旧，更新依赖后会改变目录结构

• 编译代码为 dev 分支上的 cfe4b07340

• 目前分包总大小 1774kb，资源文件可能占用超过 1300kb

• 目前小程序单包限制为 2MB

单个页面编译前后分析

以「发布团购」页面 pages/leader/publishPurchase 为例：

页面引入了两个组件：
components/publish/imageItem 和 components/publish/publishProduct

两个组件编译后文件的大小分别是 677 bytes 和 3kb，编译前代码量分别为 45 行以及 87 行。
以下是后者编译生成的文件内容：

<template name="publishProduct$6039cddd"><view class="_div data-v-61b57ef2 product-container" bindlongpress="handleProxy" data-eventid="{{'3'}}" data-comkey="{{$k}}"><view style="line-height: 100rpx; text-align: center; font-size: 10pt; color: #353535; width: 60rpx" class="_div data-v-61b57ef2">{{index + 1}}</view> <view class="_div data-v-61b57ef2 productContainer"><view style="display: flex; flex: 1; align-items: center;" class="_div data-v-61b57ef2"><view style="font-size: 10pt; color: #353535; text-algin: end; line-height: 100%" class="_div data-v-61b57ef2">{{item.product_name}}</view> <view style="font-size: 8pt; color: #353535; margin-left: 5pt; line-height: 100%" class="_div data-v-61b57ef2">(库存{{item.available_stock}})</view></view> <view style="display: flex; flex: 1; align-items: center;" class="_div data-v-61b57ef2"><view style="display: flex; flex: 1" class="_div data-v-61b57ef2"><view style="color: #353535; font-size: 8pt" class="_div data-v-61b57ef2">规格:</view> <view style="color: #353535; font-size: 8pt; margin-left: 2pt;" class="_div data-v-61b57ef2">{{item.spec_box}}{{item.spec_uom}}/{{item.sale_uom}}</view></view> <view style="display: flex; flex: 1" class="_div data-v-61b57ef2"><view style="color: #353535; font-size: 8pt" class="_div data-v-61b57ef2">单价:</view> <view style="color: #353535; font-size: 8pt; margin-left: 2pt;" class="_div data-v-61b57ef2">{{item.procurement_price}}元/{{item.sale_uom}}</view></view> <view style="display: flex; flex: 1" class="_div data-v-61b57ef2"><view style="color: #353535; font-size: 8pt" class="_div data-v-61b57ef2">售价:</view> <view style="color: #353535; font-size: 8pt; margin-left: 2pt;" class="_div data-v-61b57ef2">{{item.sale_price}}元/{{item.sale_uom}}</view></view></view></view> <view class="_div data-v-61b57ef2 iconContainer"><view style="flex: 1;width:100%; display: flex; flex-direction: column; justify-content: center; margin: 2pt 0" wx:if="{{method.productGoods.length > 1}}" class="_div data-v-61b57ef2"><view style="display: flex, flex: 1; justify-content: center" bindtap="handleProxy" wx:if="{{method.productIndex !== 0}}" data-eventid="{{'0'}}" data-comkey="{{$k}}" class="_div data-v-61b57ef2"><image style="height: 20rpx; width: 40rpx;" src="/static/assets/product_up.png" alt="上升" class="_img data-v-61b57ef2"></image></view> <view style="display: flex,flex: 1; justify-content: center" bindtap="handleProxy" wx:if="{{method.productIndex !== method.productGoods.length - 1}}" data-eventid="{{'1'}}" data-comkey="{{$k}}" class="_div data-v-61b57ef2"><image style="height: 20rpx; width: 40rpx;" src="/static/assets/product_down.png" alt="下降" class="_img data-v-61b57ef2"></image></view></view> <view style="flex: 1; display: flex; align-items: center" bindtap="handleProxy" data-eventid="{{'2'}}" data-comkey="{{$k}}" class="_div data-v-61b57ef2"><image style="height: 30rpx; width: 30rpx" src="/static/assets/delete_icon.png" alt="删除" class="_img data-v-61b57ef2"></image></view></view></view></template>

publishPurchase 页面单文件的内容被编译成多个文件：

pages/leader/publishPurchase/js/main.js (22.6 kB)                       // 页面的逻辑代码部分
pages/leader/publishPurchase/css/main.wxss (3.27 kB)                    // wxss
pages/leader/publishPurchase/components/leader$78ae12a1.wxml (9.82 kB)  // wxml 

pages/leader/publishPurchase.json   (72 bytes)                          // router.js 中的配置内容
pages/leader/publishPurchase.js     (130 bytes)                         // 页面的入口，import main.js
pages/leader/publishPurchase.wxss   (59 bytes)                          // import main.wxss 
pages/leader/publishPurchase.wxml   (139 bytes)                         // import leader$78ae12a1.wxml 

总共 35kb 左右。整个页面不包括组件，编译前代码量是 752 行。

上面的文件都是用生成正式包的命令生成 (npm run build)，相对于测试时使用的 npm run dev，区别在于 正式包的文件会去掉空格、去掉注释等压缩操作，publishPurchase/js/main.js 文件大小从 53kb 压缩到 22.6kb。

小程序分包大小

微信开发者工具显示的分包大小为：

i微信开发者工具 - 详情

mpvue 编译内容

下表是 npm run build 之后的内容，也就是生成的原生小程序代码的内容。
不精准统计，.png 总大小为 1320kb 左右。单个最大为 199kb。

编译生成的所有文件 生成的小程序目录结构