微信小程序分包后,如何优化vender.js大小问题?

新手上路,请多包涵

微信小程序vender.js过大

进行了分包,但是在分包中用了一些插件,如:省市区选择(插件是基于uniapp的picker封装的),发现这个插件的省市区都被打包进了vender.js,导致vender.js过大,怎么能解决这个问题?求教!!!

阅读 2.9k
2 个回答

可以采用 异步加载子包 的方式,将引用到的第三方模块单独抽取为一个包文件,然后在业务中 使用 异步加载子包 的方式加载,这样就会减小主包体积

我这里写过一个开源的 uniapp 拆包项目,你可以参考下:uniapp-ts-skeleton

另还有一个开源你的 小程序CI助手,希望也对你有用

有两种解决方案

1.按需加载省市区数据

步骤:

  • 修改插件源码,使其只在需要时加载省市区数据。
  • 保证插件在初始化时不加载所有数据,而是在用户选择省市区时,通过异步请求加载相应的数据。

示例:

// 假设插件使用的是 Vue.js
methods: {
  loadProvinceData() {
    // 异步加载省数据
    import('./data/provinces.json').then(data => {
      this.provinces = data;
    });
  },
  loadCityData(provinceId) {
    // 根据省份ID异步加载市数据
    import(`./data/cities/${provinceId}.json`).then(data => {
      this.cities = data;
    });
  },
  loadDistrictData(cityId) {
    // 根据市ID异步加载区数据
    import(`./data/districts/${cityId}.json`).then(data => {
      this.districts = data;
    });
  }
}

2. 异步加载分包

步骤:

  • 将省市区数据放在一个独立的分包中。
  • 在需要时异步加载这个分包,避免在主包或其他分包中加载不必要的数据。

示例:

// 在 app.json 中配置分包
{
  "subPackages": [
    {
      "root": "subPackage",
      "pages": [
        "pages/province/province",
        "pages/city/city",
        "pages/district/district"
      ]
    }
  ]
}

// 在需要时异步加载分包
wx.loadSubpackage({
  name: 'subPackage',
  success: function(res) {
    // 分包加载成功
  },
  fail: function(err) {
    // 分包加载失败
  }
});
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏