微信小程序 分包

微信小程序 分包

app.json

// 分包 一些除tab外的模块 可包括组件
// root 分包页面所属文件夹路径
// name 自定义分包名
// pages 分包具体页面相对root的文件路径 到(.wxml)可省略
"subPackages": [
    {
        "root": "pages/PK",
        "name": "PK",
        "pages": [
            "PKMine/PKMine",
        ]
    },
    {
        "root": "components",
        "name": "Component",
        "pages": [
            "card/card"
        ]
    }
],
// app.json 广义上的全局组件按需注入
"lazyCodeLoading": "requiredComponents",

page.json

lazyCodeLoading会导致所有被引用的组件都被视为页面依赖并注入和记载，也就是说会在主包加载时一起加载，一些比较大的组件可以用原生组件占位以实现仍按需注入。

// 页面使用组件的地方
"usingComponents": {
    "ec-canvas": "../../../components/ec-canvas/ec-canvas"
},
// 用原生view组件占位
"componentPlaceholder": {
    "ec-canvas": "view"
}

page.ts

// 分包A引用分包B的方法
// 原代码在分包后无法找到依赖：
// import * as echarts from '../../../components/ec-canvas/echarts'

// 解决方案：require
let echarts:any;

require('../../../components/ec-canvas/echarts.js', ec => {
    echarts = ec
}, ({mod, errMsg}) => {
    console.log(`path: ${mod}, ${ errMsg}`)
})