fidermo
fidermo
  • 发布:2019-10-29 09:59
  • 更新:2023-01-16 17:34
  • 阅读:1767

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

分类: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 负责人:无 分享
已邀请:
1***@139.com

1***@139.com

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

陈晨1

陈晨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

fidermo (作者)

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

DCloud_uniCloud_WYQ

DCloud_uniCloud_WYQ

暂时没有独立分包的计划

  • MrFeng22

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

    2020-09-28 20:49

L***@163.com

L***@163.com

支持了吗现在

2***@qq.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

2***@qq.com

2***@qq.com

按照uni-app的设计估计是不支持的,只能用原生代码写了

RiverBird001

RiverBird001

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

  1. 新建个目录专门写独立分包的页面,只能用原生写,不参与uni-app构建。
  2. 使用copy-webpack-plugin将该目录拷贝到对应的dist目录。
const distDir = process.env.UNI_OUTPUT_DIR  
new CopyPlugin([  
   {  
      from: path.resolve(__dirname, './src/independentPackpage'),  
      to: path.resolve(__dirname, `./${distDir}/`),  
   },  
]),
  1. 由于页面路径不能写到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()  
        })  
    }  
}

要回复问题请先登录注册