记一次小程序分包优化

一、分包的概念

1.本质上是改变项目的路由以及优化项目各个模块的启动时间的一种优化技术。
2.主包与分包的概念

1、主包：本项目中初始化时所必须的页面。项目在启动时，将从主包进入，分包在用户未进入时不会加载，只有在进入分包模块时才会加载。
tabbar页面以及模块间共有的页面，如果该项目有账号限制(即非注册账号不可进入主界面)，也应将登录页放置在主包内。
2、分包：除主包外的所有页面都应放置在分包内，为避免读者混淆，本文会将该分包定义为子包

二、为什么要分包

优化项目首次启动的下载时间;小程序默认就是整包(主包)下载,但这会导致整个项目只有在全部加载完毕后才会回显到用户眼前，这样虽然可以使用加载动画进行优化，但也会有部分可能导致用户流失；

防止项目超出小程序官方对小程序项目打包后的大小限制；

若不分包，整个程序最大限制不能超过2M，分包后，整个项目(包含主包+子包)最大不能超过16M,单个包不能超过2M (这样就规避了项目最大不得超过2m的限制)

三、分包逻辑

• 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
• js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
• 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息

四、分包步骤详解

ps:本人用的是uniapp作为开发框架，对原生小程序项目同样有效
ps:本人将tabbar作为两个页面作为主包，其余页面作为子包，由于静态文件体积过大，这里我将静态文件也分成两部分，分别注入主包和子包里。

1. 开启分包优化

 "optimization" : {
            "subPackages" : true //是否启用分包优化
        }

2. (pages.json) 声明项目分包结构

• pages：
  原则：pages内只允许存放tabbar页面路由，以及各个子包所共有的页面页面，如果有登录页且不登录无法进入主页面，该登录页面路由也应放置在pages路由内
• subPackages：
  定义：单个模块内的除主包内文件的所有的文件，
  比如: 假设一个tabbar模块内原本有index(tabbar页).vue,notice.vue,about.vue这三个页面，将index.vue这个页面路由放置pages.json中的pages数组内，对应的将index.vue放置在项目中的pages目录内
  假设notice.vue与about.vue没有在别的tabbar模块中被使用，则应该将notice.vue和about.vue两个页面文件放置在subPackages中
  若notice.vue与about.vue这两个页面中有被别的模块使用，则同样应该将其放置在pages主包内，为防止其与其他tabbar页面混淆，应该在pages目录内再单独开辟一个目录专门用于存放共有页

总结
在项目启动前，最好就做好分包计划，如果后期处理分包，因为跳转路由、文件路径改变，后期要对项目中所有文件逐一修改，是很大且很容易出错的工作。所以建议项目前期做好分包规划：pages里只有tabbar文件，subPackages里存放其他页面和其他静态资源文件。