【uniapp开发微信小程序分包异步化的实践 】

背景

相信很多开发微信小程序的都遇到过小程序主包限制2M的问题。只要主包超过2M就会导致无法发布小程序。前提是你已经完成了小程序的基本分包。当小程序功能复杂，且主包中引入了大体积的第三方库，此时删减代码量效果微乎其微。因此重点是：在不占用主包大小的情况下，依然可以使用这些库。本文以mqtt为例。

查看主包大小构成

安装webpack-bundle-analyzer 。并在vue.config.js下加入如下配置。当你成功使用HbuildX启动小程序时，浏览器会自动打开一个名为 http://127.0.0.1:8888/ 的本地服务。可以清楚主包体积结构。我看出mqtt.js占用主包较大，所以我们优先选择优化体积较大的包。

//vue.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
  configureWebpack: { //直接使用copy官网到代码运行HbuilderX 会报错，在这里加了一层 //configureWebpack
    plugins: [
      new BundleAnalyzerPlugin()
    ]
  }
}

1、配置分包

首先在pages.json下配置mqtt的分包，然后在你的根目录下创建一个空的index.vue （否则会报错）和mqtt.js。 mqtt.js中放入mqtt.js的源码。

"subPackages": [
		{
			"root": "packageMqtt",
			"name": "packageMqtt",
			"pages": [
				{
					"path": "index"
				}
			]
		}
	]

2、使用copy-webpack-plugin

安装copy-webpack-plugin，在vue.config.js中使用一下。

// vue.config.js
const path = require('path'); // Import the path module
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  configureWebpack: { //直接使用copy官网到代码运行HbuilderX 会报错，在这里加了一层 
    plugins: [
      new BundleAnalyzerPlugin(),
      new CopyWebpackPlugin([
        {
          from: path.join(__dirname, 'packageMqtt'),
          to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'packageMqtt'),
        }
      ])
    ]
  }
}

3、修改主包中引入mqtt的方式

注释掉 import mqtt from "@/utils/mqtt.js"

<script>
// import mqtt from "@/utils/mqtt.js";
let mqtt = null;
export default {
  data() {},
  methods: {
  //添加一个异步化加载mqttJs的方法
    getMqttAsync(cb) {
      if (mqtt) {
        cb(mqtt);
      } else {
        __non_webpack_require__ &&
          __non_webpack_require__(
            "../packageMqtt/mqtt.js",
            (res) => {
              // 这里打印一下 mqtt.js 的源码
              console.log("mqttJs", res);
              mqtt = res;
              cb(mqtt);
            },
            ({ mod, errMsg }) => {
              console.error(`分包异步化报错: ${mod}=================${errMsg}`);
            }
          );
      }
    },
  },
  async onLaunch() {//onReady ready 选择合适的hook 异步化加载mqtt
    this.getMqttAsync((mqttjs) => {
      mqtt = mqttjs;
    });
  },
};
</script>

跑一下看看效果，成功拿到mqtt实例。

再看一下主包结构

成功将主包大小1.76M => 1.4M 。四舍五入约0.4M。至此完成了第三方库的分包异步化引入。

4、总结

跳过主包打包mqtt的流程。然后通过copy-webpack-plugin将mqtt.js复制进dist文件下对应的分包文件夹内实现了分包异步化。成功优化了小程序主包的体积大小