微信小程序主包超2M打包发布成功等相关配置

期望通过每一次分享，让技术的门槛变低，落地更容易。 —— around

背景

作者公司开发了一个小程序，经过几个版本的迭代，大小超过了2M，研发主要使用的组件是uni-app，前面几个版本包大了我们添加了optimization.subPackages=true的配置，并给不同功能页面完成了分包，到此解决第一阶段包过大的问题。（匹配正文1-2）
过了几个月，我们在新版研发上使用了新的组件uView2.0，它依赖了webpack5，后续使用新版后，optimization.subPackages=true该配置直接会导致开发工具打包编译直接一直死循环，查了一大堆资料和调试，最终找到解决方案，与网络上未谋面的zhijiang3印证了解决方案，留此完成记录。

目录

• 1.添加编译属性
• 2.分包优化
• 3.package添加配置
• 4.webpack5引起的bug

正文

遇上包过大，在当前时间2022-11-3，微信开发者工具会对主包超过2M的内容进行限制上传，其中最直接体现超过大小的文件大部分情况都是/主包/commom/vendor.js，本次作者的该文件达到了3.1M。

1. 添加编译属性

• 按需注入
  在小程序启动时，启动页面依赖的所有代码包（主包、分包、插件包、扩展库等）的所有 JS 代码会全部合并注入，包括其他未访问的页面以及未用到自定义组件，同时所有页面和自定义组件的 JS 代码会被立刻执行。这造成很多没有使用的代码在小程序运行环境中注入执行，影响注入耗时和内存占用。

  {
  	"lazyCodeLoading": "requiredComponents"
  }
  

  

  使用该配置后，需要注意测试，避免小程序在加载的时候表项符合自己的预期。

• 用时注入
  在开启「按需注入」特性的前提下，「用时注入」可以指定一部分自定义组件不在小程序启动时注入，而是在真正渲染的时候才进行注入。

  1. 每个页面内，第一次渲染该组件前，该组件都不会被注入；
  2. 每个页面内，第一次渲染该组件时，该组件会被渲染为其对应的占位组件，渲染流程结束后开始注入；
  3. 注入结束后，占位组件被替换回对应组件。

2. 分包优化

• 添加优化参数
  在自己项目中的manifest.json文件内添加如下内容

  "optimization": {
  	"subPackages": true
  }  
  

  

• 文件分包
  文件分包最重要的部分就是需要注意，诸如下列文件夹直接作用于顶层的需要尽可能的少。不然会导致顶层文件过多和内容增大，编译后超过1.5M是很正常的。
  对功能内容超过8个单页的小程序，建议及时分包，将授权、登录、默认页面全部放在顶层，其他业务页面均做分包处理。若已经产生包过大，建议将顶层相关代码直接移至对应业务使用的分包里，不要放在顶层。具体分包配置不做介绍，网上太多。
  

最后

添加完毕配置参数和调整完分包后，切记别忘了重新编译文件，不然大小不会有变化的

以上就是近期处理小程序发现关于发包的问题，部分内容来自微信开发平台，其他均为网上搜索到整理汇总。