uni-app开发的微信小程序如何分包(解决打包出错问题)

目录

• 前言
• 一、根据官方文档说明
• 二、如何配置
• 1.项目目录
• 2.开始配置pages.json
• 总结
• 扩展

---

 

---

前言

发现目前网络上对于uni-app的小程序分包详细介绍的文章来说大部分都是存在问题的，没办法打包，就算是打包也不能使用，主要原因还是因为所使用的第三方包版本升级，uni-app的版本升级。

通过对官方文档的学习，发现现在的分包无需那么复杂可以简单的实现。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、根据官方文档说明

subPackages

分包加载配置，此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

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

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，会把对应分包自动下载下来，下载完成后再进行展示。此时终端界面会有等待提示。

二、如何配置

1.项目目录

目录结构如下（示例）：

┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json 

我们创建的包A和包B，同时每个包目录里面可以创建静态文件的目录static，这点很重要我们这样子创建的话就可以不用再配置copy-webpack-plugin打包静态文件了，因为这个容易出问题。

2.开始配置pages.json

代码如下（示例）：

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }, {
        "path": "pages/login/login",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }]
}

这样配置就可以了，页面的路径还是要带上包名如：/pagesA/list/list才能进行访问

---

总结

网上很多使用 copy-webpack-plugin 插件包进行小程序分包的插件不是很好用，修改 copy-webpack-plugin 版本为5.0后是不会报错了但是同样没生效，静态文件还是没有打包进去。

建议不必使用这个插件可以直接采用这种形式进行分包就可以了

同时注意多个包使用到的公共静态文件最好是放一个地方就可以，不必重复打包

扩展

preloadRule

分包预载配置。

配置preloadRule后，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度

 "preloadRule": {
        "pagesA/list/list": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/detail/detail": {
            "network": "all",
            "packages": ["pagesA"]
        }
    }