uniapp和小程序如何分包，详细步骤手把手（图解）.pdfVIP

uniapp和⼩程序如何分包，详细步骤⼿把⼿（图解） ⼀、⼩程序分包 本；⽽分包则是根据开发者的配置进⾏划分。 在⼩程序启动时，默认会下载主包并启动主包内页⾯，当⽤户进⼊分包内某个页⾯时，客户端会把对应分包下载下来，下载完成后再进⾏展 ⽰ ⽬前⼩程序分包⼤⼩有以下限制： 整个⼩程序所有分包⼤⼩不超过 20M 单个分包/主包⼤⼩不能超过 2M 对⼩程序进⾏分包，可以优化⼩程序⾸次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。 ⼆、uniapp分包⼩程序 App默认为整包。兼容⼩程序的分包配置。其⽬的不⽤于下载提速，⽽⽤于⾸页是vue时的启动提速。 这是我分包⼩程序之后的⽬录结构 components:公共组件 （供主包引⽤） page_后跟拼⾳的都是分包 分包⾥的components是单个分包⾃⼰的组件 ⽬录，分包vue页⾯的引⽤只能是在⾃⼰page_zhaoshang分包⽬录下才可以引⽤ pages是主包，⾥⾯都是启动页⾯/TabBar 页⾯ static⾥放的是公共静态资源，图⽚类 分包步骤： 1.配置manifest.json mp-weixin: { optimization:{subPackages:true} } 优化分包： 在对应平台的配置(manifest.json)下添加optimization:{subPackages:true}开启分包优化 ⽬前只⽀持mp-weixin、mp-qq、mp-baidu的分包优化 静态⽂件：分包下⽀持 static 等静态资源拷贝，即分包⽬录内放置的静态资源不会被打包到主包中，也不可在主包中使⽤ js⽂件：当某个 js 仅被⼀个分包引⽤时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引⽤，或被超过 1 个分包引⽤） ⾃定义组件：若某个⾃定义组件仅被⼀个分包引⽤时，且未放⼊到分包内，编译时会输出提⽰信息 2.配置pages.json 在pages.json中新建数组subPackages，数组中包含两个参数：1.root：为⼦包的根⽬录，2.pages：⼦包由哪些页⾯组成，参数同 pages； 注意：主包和分包是不能再同⼀⽬录下，在构建uniapp项⽬时，可以考虑⼀下⽬录结构，以便后期进⾏分包； 3.分包预载配置（preloadRule） 做这⼀步主要为了优化速度，不想优化速度的可以跳过这个配置 配置preloadRule后，在进⼊⼩程序某个页⾯时，由框架 ⾃动预下载可能需要的分包，提升进⼊后续分包页⾯时的启动速度 preloadRule 中，key 是页⾯路径，value 是进⼊此页⾯的预下载配置，每个配置有以下⼏项： 字段 类型 必填 默认值 说明 packages StringArray 是 ⽆ 进⼊页⾯后预下载分包的 root 或 name。__APP__表⽰主包。 network String 否 wifi 在指定⽹络下预下载，可选值为：all（不限⽹络）、wifi（仅wifi下预下载） app的分包，同样⽀持preloadRule，但⽹络规则⽆效。 例⼦：