微信小程序分包加载，以及分包预加载

最新推荐文章于 2025-05-15 15:43:53 发布

原创最新推荐文章于 2025-05-15 15:43:53 发布 · 8.4k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #分包加载 #分包预加载

微信小程序同时被 3 个专栏收录

13 篇文章

订阅专栏

分包

1 篇文章

订阅专栏

预加载

1 篇文章

订阅专栏

本文讲解了微信小程序通过分包处理减少主包体积的方法，介绍了如何配置preloadRule自动预下载可能需要的分包，以提升用户体验。注意基础库版本低于2.3.0不支持预加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序的项目随着不断地迭代，功能越来越多，代码包相应越来越大，主包体积过大，就会影响用户进入小程序时候的体验，所以要尽可能的减少主包的大小，对代码包进行分包处理，需要的时候再去加载，也可以在进入某些页面之后再去预加载分包数据

export default class extends wepy.app {
  config = {
    pages: [
      'pages/loading',
      'pages/index',
      'pages/mine',
      'pages/indexInvoice',
      'pages/indexForwarder',
      'pages/userInfo',
      'pages/integral',
      'pages/shareShip',
      'pages/shareInvoice',
      'pages/help',
      'pages/vip'
    ],
    subPackages: [
      {
        root: 'ship',
        name: 'ship',
        pages: [
          'search',
          'invoiceDetails',
          'myship',
          'intention',
          'customer',
          'customerDetails',
          'freightList',
          'bindShip'
        ]
      },
      {
        root: 'freight',
        name: 'freight',
        pages: [
          'fleet',
          'myInvoice',
          'msg',
          'newInvoice',
          'shipDetails',
          'selectInvoice',
          'fleetDetails',
          'send',
          'rechargeHistory',
          'msgConfirm',
          'bindFreight',
          'myInvoiceDetails'
        ]
      }
    ],
    preloadRule: {
      'pages/indexInvoice': {
        network: 'all',
        packages: ['ship']
      },
      'pages/indexForwarder': {
        network: 'all',
        packages: ['freight']
      }
    },
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#1270e1',
      navigationBarTitleText: '标题',
      navigationBarTextStyle: '#ffffff'
    },
    networkTimeout: {
      uploadFile: 300000
    }
  };
  globalData = {
    
  };
  constructor() {
    super();
    this.use('requestfix');
    this.use('promisify');
  }
  onLaunch(options) {
    let that = this;
    wx.setStorageSync(wepy.$appConfig.baseUrl + 'scene', options.scene);
    //  await this.Load();
  }
  onShow() {
    this.update();
  }
  onHide() {

  }
  unload() {
    
  }
  


}
</script>

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

在进入‘pages/indexInvoice’时会预加载分包ship；

在进入‘pages/indexForwarder’时会预加载分包freight；

packages可以设置为进入页面后预下载分包的 root 或 name。__APP__ 表示主包

network可以设置为 all: 不限网络，wifi: 仅wifi下预下载

需要注意的是基础库版本低于2.3.0是不支持预加载的，当你进入分包的页面时，才会去加载分包