当前位置：首页 > article >正文

微信小程序分包异步化

article 2025/2/11 7:57:08

分包1引入分包2的组件或者js

引入组件：

主包里的pages/tabbars/tabbar1/tabbar1页面引入分包sub1的sub1/components/sub1-component/sub1-component组件

1、分包预下载首先在app.js定义preloadRule

"preloadRule": {
    "pages/tabbars/tabbar1/tabbar1": {
      "network": "all",
      "packages": ["sub1"]
    }
  },

就是说进入到pages/tabbars/tabbar1/tabbar1页面的时候会去下载sub1分包

2、引入分包组件

"usingComponents": {
    "sub1-component": "../../../sub1/components/sub1-component/sub1-component"
  },
  "componentPlaceholder": {
    "sub1-component": "view"
  }

componentPlaceholder是用来定义下载为完成的时候显示的占位组件，就是说sub1-component未下载渲染完成时页面显示的是view元素，也可以换成别的组件。

3、使用

直接在tabbar1 wxml里使用<sub1-component></sub1-component>就可以了

我在sub1-component里就写了展示sub1-component文字

<view style="margin-top: 100rpx;" bind:tap="onClick">sub1-component</view>

所以展示出来就是这样的

第二个是引入分包的js

例如：在主包的tabbar1引入分包sub2里的utils.js

在分包sub2写了个utils.js 导出了一个deepCopy的方法

在tabbar1页面的js里这样写

// 加载分包的js
  loadSubPackage() {
    try {
      require('../../../sub1/utils.js', mode => {
        console.log('@@sub1-com success', mode)
      }, (err) => {
        console.log('@@sub1-com err', err)
      })
    } catch (error) {
      console.log('@@分包异步化加载失败', error)
    }
  },

就能得到分包里的方法了

可以把这些方法放到全局wx里，这样其他分包不用引入也可以直接使用了

// 加载分包的js
  loadSubPackage() {
    try {
      require('../../../sub1/utils.js', mode => {
        console.log('@@sub1-com success', mode)
        // 将方法写入全局里 这样其他分包也可以直接使用 而不用再引一遍
        const prefix = 'sub1_utils_'
        for(const [k,v] of Object.entries(mode)) {
          wx[prefix + k] = v
        }
        console.log('@@写入全局wx里的方法', wx.sub1_utils_deepCopy)
      }, (err) => {
        console.log('@@sub1-com err', err)
      })
    } catch (error) {
      console.log('@@分包异步化加载失败', error)
    }
 }

可以看到打印里成功写入了