uni-app 分包

一、何为uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

我们项目使用uni-app开发微信小程序。所以本文仅针对用uni-app开发的微信小程序而进行的分包。

二、分包的原因

微信小程序对包的大小有要求。目前微信小程序分包大小有以下限制：

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M

大多情况下，我们需要对主包进行瘦身——分包，把不属于公共的组件，不是属于小程序主体页面的模块分出去。否则我们在上传小程序的时候会上传失败。

另外，微信小程序在启动的时候会下载整个主包并启动主包内【所有】的页面；当用户进入分包的某个页面时，再去下载对应的整个分包，然后再显示该页面。因此，对主包进行分包有利于提升小程序启动速度。

二、开启分包

默认情况下，uni-app是不会开启分包的。需要在manifest.json 应用配置文件进行配置——在对应平台的配置下添加"optimization":{"subPackages":true}开启分包优化。

【配置】

1、在文件目录点击manifest.json，在该文件的右侧文件配置选项滚动到最底部 

2、点击【源码视图】，文件左侧界面切换为JSON格式的文档，设置subPackages字段为true。具体官方说明见地址：manifest.json 应用配置 | uni-app官网

三、微信小程序分包

首先，总的uni-app分包优化具体逻辑：

• 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
• js文件：当某个 js 【仅】被【一个分包】引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
• 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息===>我遇到的情况是，自定义组件被多个分包引用，编译时也会输出提示信息。所以这个我认为可以忽略，主要还是看微信开发者工具中的代码依赖分析或者其他的包分析工具。

微信小程序的默认分包逻辑：

• 主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；
• 而分包则是根据开发者的配置进行划分。

微信小程序具体分包指南：使用分包 | 微信开放文档

四、分包操作

分包需要我们找到主包里比较大的文件。我们可以借助微信开发者工具自带的代码依赖分析工具进行分析。一般来说都能找到比较明显的大文件。尽量将大文件挪到分包目录下。

但是有一些比较不太明显大文件，代码依赖工具看不出来。我们可以借助另一个工具——webpack-bundle-analyzer进行分析。webpack-bundle-analyzer的使用方法参照另一个文章：使用webpack-bundle-analyzer分析uni-app 的微信小程序包大小（HbuilderX运行）

从分析图里很明显看到左侧的common/vendor.js 是占空间最大。那么就着重分析这一块。

从图中可以看到比较明显的问题就是：

【1】存在@dcloudio  超大文件

【解决】如果使用了uni-app的导入uni_modules方式导入组件，那么就会有这个情况。将组件引入方式改为直接引入，不要使用uni_modules引入。

【2】 有两个同样的lodash.js文件。

【解决】去掉手动引入的lodash.js文件