独立分包，可否支持百度与微信的独立分包功能

分类：uni-app

背景：直接跳入小程序的分包页面时加载时长久，需要先下载主包，再下载分包，然后才能查看页面。导致页面加载时间长

问题：现在百度和微信都已经支持了独立分包的功能，使用"independent": true 配置为独立分包的页面可以单独下载，不需要下载主包，当然也不能依赖主包的文件。通过 uni-app 打包的页面因为基于vue，所有页面都会引用其它js。导致单独访问独立分包会报错

解决方案：请问 page.json 的分包配置中是否可以支持独立分包，打包时编译为百度和微信的独立分包？

以下是独立分包的语法。需要有 independent 属性，但是目前 uni-app 还不支持这个独立分包的属性

"subPackages": [  
   {  
      "root": "servicePackage",  
      "pages": [  
        {  
          "path": "independent/package",  
          "style": {  
            "navigationBarTitleText": "独立分包页面"  
          }  
        }  
      ],  
      "independent": true  
    }  
  ]

2019-10-29 09:59 负责人:无分享

8 个回复

1***@139.com

很期待！！！祈愿官方团队早日实现支持“独立分包”功能！

RiverBird001

目前看只能用原生小程序开发

新建个目录专门写独立分包的页面，只能用原生写，不参与uni-app构建。
使用copy-webpack-plugin将该目录拷贝到对应的dist目录。

const distDir = process.env.UNI_OUTPUT_DIR  
new CopyPlugin([  
   {  
      from: path.resolve(__dirname, './src/independentPackpage'),  
      to: path.resolve(__dirname, `./${distDir}/`),  
   },  
]),

由于页面路径不能写到pages.json里，不然页面会参与打包，所以需要单独写个配置文件维护，然后再写个webpack插件，在done钩子把页面路径配置更新到app.json中。

class TransIndentPlugin {  
    constructor() {  
        this.isTrans = false  
        this.independentPackpageConfig = independentPackpages  
    }  

    apply(compiler) {  
        compiler.hooks.done.tapAsync('trans-indentplugin', (stats, callback) => {  
            if (this.isTrans) {  
                callback()  
                return  
            }  
            const url = `${path.join(process.cwd())}/${process.env.UNI_OUTPUT_DIR}/app.json`  
            const appJson = require(url)  
            appJson &&  
                appJson.subPackages &&  
                appJson.subPackages.push(...this.independentPackpageConfig)  
            fs.writeFileSync(url, JSON.stringify(appJson, null, 2))  
            this.isTrans = true  
            callback()  
        })  
    }  
}

陈晨1

// #ifdef MP-WEIXIN  
{  
    "path": "test",  
    "style": {  
        "navigationBarTitleText": "test"  
    }  
},  
// #endif  
// #ifndef MP-WEIXIN  
{  
    "path": "test",  
    "style": {  
        "navigationBarTitleText": "test1"  
    }  
},  
// #endif

这样写

fidermo (作者)

谢谢回答，请问最近有加入独立分包功能的计划吗

2019-10-29 13:48

fidermo (作者)

请问大家有编译独立分包的解决方案吗

DCloud_uniCloud_WYQ

暂时没有独立分包的计划

MrFeng22

大佬，针对想独立分包，有什么建议不

2020-09-28 20:49

L***@163.com

支持了吗现在

2***@qq.com

独立分包实测已支持（至少2021-04就支持了）：

8***@qq.com

请问代码有效么？使用独立分包编译后，在微信开发者工具中不加载页面吖

2022-04-18 16:23
fidermo (作者)

刚刚用最新的vue3+vite测试了下，产出包的app.json是有 independent了。但是页面里还是会读取主包的common/vendor.js。导致报错。所以我的产出包不能用独立分包的方式访问

2022-04-29 11:15
5***@qq.com

回复 fidermo: 现在都23年了，独立分包用vue3 ts模式写简单的demo都还是一样报错 Error: module 'common/vendor.js' is not defined, require args is '../../common/vendor.js'

2023-03-08 15:18
5***@qq.com

回复 5***@qq.com: 我也是这样，得自己去修改require为require.async才行，需要官方打包支持一下才好，打包后手动修改太麻烦了

2023-03-23 16:11