前言
最近接到一个二次项目，发现一个普通小项目的主包居然超过了1.5MB，甲方还不断添加功能。乍一看，这就像一个糟糕的项目。为了更好的发展，我打算把整个小程序重新规划一下，然后分包出去。当我准备清理一堆粪便时，我发现这堆粪便有毒！原来的项目被多个作者反复拉屎，主包拉屎、分包拉屎的操作也完美实现，导致整体优化困难，所以我就思考是否可以使用异步组件和跨包js的加载。这样就剥离了部分文件，以优化主包大小。
上姿势点
这里首先需要介绍一下微信小程序的官方文档：分包与异步
微信小程序从2.11.2开始支持分包异步，因此引入了两个特性，支持跨分包自定义组件引用和跨分包JS代码引用。利用这两个功能，我们可以优化主包体积。
1. 交叉分包的自定义组件引用
交叉分包自定义组件引用需要使用占位符组件进行配置。根据微信小程序官方文档，描述如下。
中，相应地我们需要在.json中配置以下内容
配置完成后，我们就可以在页面中正常使用了，并且相应的，在分包加载进去后也可以正常响应。
但这一切看似美好，但实际上还是存在一些问题，主要有以下几个
虽然存在一些问题，但是我们仍然可以将一些业务组件分离成分包，然后使用跨包组件来减少主包的大小。在我的项目中，我就是通过这种方式连接到腾讯云IM的。将消息列表连接到 ，否则根据以往的经验，这部分肯定会占用主包很大的空间。
2. 交叉分包js调用
调用交叉分包的js，需要直接使用，会报错，编译失败。因此我开发了一个插件，可以方便直接调用分包的js。
对应插件地址：zion--mp-load-
对应demo地址：/zion--mp-load-
const { zionUniMpLoadPackagePlugin } = require('zionUniMpLoadPackagePlugin/webpack') module.exports = { configureWebpack: { plugins: [ new zionUniMpLoadPackagePlugin() ], optimization: { moduleIds: 'named', } }, }
这是vue3，添加/修改vite..js
import { defineConfig } from 'vite'; import uni from '@dcloudio/vite-plugin-uni'; import { zionUniMpLoadPackagePlugin } from './script/zionUniMpLoadPackagePlugin/vite' export default defineConfig({ plugins: [ uni(), zionUniMpLoadPackagePlugin() ], });
// 这里的packageA对应的就是分包目录 loadMpPackage("packageA", () => { // ... console.log('加载成功') // 这里就可以直接引入分包中对应位置的js，调用其方法 console.log(loadMpPackageModule('/packageA/sdk/index.js')) console.log(loadMpPackageModule('/packageA/sdk/index.js').a()) }, ({mod, errMsg}) => { // ... console.log('加载出错', mod, errMsg) })
使用我的插件后，基本上很多第三方js，或者占用大量空间的js，都可以直接转移到独立的子包中，从而大大减少了对主包的占用。就这样，我把高德地图、省市、IM、音视频插件都转移了，主包最终缩小到1M左右。
对了，如果有不吝啬的大佬，也可以给我一星：
2024 年 7 月 26 日：已发现一些错误。它们只存在于vue2版本中。引入插件后，主包大小反而增大。这个只存在于vue2/版本中。原因是模块被插件接管，打包后计算。有问题（因为分包时需要重定向，导致分包ID有问题，目前没有完美的结局解决方案）。建议开发者根据项目的实际运行情况来决定是否采用该方案（可以先引入插件，干运行看看前后主包体积）。感谢评论区老大提出并配合调试。
前言
最近接到二次项目的时候，发现一个普通的小项目的主包居然超过了1.5MB，而且甲方还在不断的添加功能。乍一看，这就像一个糟糕的项目。为了更好的发展，我打算把整个小程序重新规划一下，然后分包出去。当我准备清理一堆粪便时，我发现这堆粪便有毒！原来的项目被多个作者反复拉屎，主包拉屎、分包拉屎的操作也完美实现，导致整体优化困难，所以我就思考是否可以使用异步组件和跨包js的加载。这样就剥离了部分文件，以优化主包大小。
上姿势点
这里首先需要介绍一下微信小程序的官方文档：分包与异步
微信小程序从2.11.2开始支持分包异步，因此引入了两个特性，支持跨分包自定义组件引用和跨分包JS代码引用。利用这两个功能，我们可以优化主包体积。
1. 交叉分包的自定义组件引用
交叉分包自定义组件引用需要使用占位符组件进行配置。根据微信小程序官方文档，描述如下。
中，相应地我们需要在.json中配置以下内容
配置完成后，我们就可以在页面中正常使用了，并且相应的，在分包加载进去后也可以正常响应。
但这一切看起来不错，但实际上还是存在一些问题，主要有以下几个
虽然存在一些问题，但是我们仍然可以将一些业务组件分离成分包，然后使用跨包组件来减少主包的大小。在我的项目中，我就是通过这种方式连接到腾讯云IM的。将消息列表连接到 ，否则根据以往的经验，这部分肯定会占用主包很大的空间。
2. 交叉分包js调用
调用交叉分包的js，需要直接使用，会报错，无法编译。因此我开发了一个插件，可以方便直接调用分包的js。
对应插件地址：zion--mp-load-
对应demo地址：/zion--mp-load-
const { zionUniMpLoadPackagePlugin } = require('zionUniMpLoadPackagePlugin/webpack') module.exports = { configureWebpack: { plugins: [ new zionUniMpLoadPackagePlugin() ], optimization: { moduleIds: 'named', } }, }
这是vue3，添加/修改vite..js
import { defineConfig } from 'vite'; import uni from '@dcloudio/vite-plugin-uni'; import { zionUniMpLoadPackagePlugin } from './script/zionUniMpLoadPackagePlugin/vite' export default defineConfig({ plugins: [ uni(), zionUniMpLoadPackagePlugin() ], });
// 这里的packageA对应的就是分包目录 loadMpPackage("packageA", () => { // ... console.log('加载成功') // 这里就可以直接引入分包中对应位置的js，调用其方法 console.log(loadMpPackageModule('/packageA/sdk/index.js')) console.log(loadMpPackageModule('/packageA/sdk/index.js').a()) }, ({mod, errMsg}) => { // ... console.log('加载出错', mod, errMsg) })
使用我的插件后，基本上很多第三方js，或者占用大量空间的js，都可以直接转移到独立的子包中，从而大大减少了对主包的占用。就这样，我把高德地图、省市、IM、音视频插件都转移了，主包最终缩小到1M左右。
对了，如果有不吝啬的可以给我一个star：
2024 年 7 月 26 日：已发现一些错误。它们只存在于vue2版本中。引入插件后，主包大小反而增大。这个只存在于vue2/版本中。原因是模块被插件接管，打包后计算。有问题（因为分包时需要重定向，导致分包ID有问题，目前没有完美的结局解决方案）。建议开发者根据项目的实际运行情况决定是否采用该方案（可以先引入插件，干运行看看前后主包体积）。感谢评论区老大提出并配合调试。
前言
最近接到一个二次项目，发现一个普通小项目的主包居然超过了1.5MB，甲方还不断添加功能。乍一看，这就像一个糟糕的项目。为了更好的发展，我打算把整个小程序重新规划一下，然后分包出去。当我准备清理一堆粪便时，我发现这堆粪便有毒！原来的项目被多个作者反复拉屎，主包拉屎、分包拉屎的操作也完美实现，整体很难优化，所以我就想是否可以使用异步组件和跨包js的加载。这样就剥离了部分文件，以优化主包大小。
上姿势点
这里首先需要介绍一下微信小程序的官方文档：分包与异步
微信小程序从2.11.2开始支持分包异步，因此引入了两个特性，支持跨分包自定义组件引用和跨分包JS代码引用。利用这两个功能，我们可以优化主包体积。
1. 交叉分包的自定义组件引用
交叉分包自定义组件引用需要使用占位符组件进行配置。根据微信小程序官方文档，描述如下。
中，相应地我们需要在.json中配置以下内容
配置完成后，我们就可以在页面中正常使用了，并且相应的，在分包加载进去后也可以正常响应。
但这一切看起来不错，但实际上还是存在一些问题，主要有以下几个
虽然存在一些问题，但是我们仍然可以将一些业务组件分离成分包，然后使用跨包组件来减少主包的大小。在我的项目中，我就是通过这种方式连接到腾讯云IM的。将消息列表连接到 ，否则根据以往的经验，这部分肯定会占用主包很大的空间。
2、交叉分包js调用
调用交叉分包的js，需要直接使用，会报错，无法编译。因此我开发了一个插件，可以方便直接调用分包的js。
对应插件地址：zion--mp-load-
对应demo地址：/zion--mp-load-
const { zionUniMpLoadPackagePlugin } = require('zionUniMpLoadPackagePlugin/webpack') module.exports = { configureWebpack: { plugins: [ new zionUniMpLoadPackagePlugin() ], optimization: { moduleIds: 'named', } }, }
这是vue3，添加/修改vite..js
import { defineConfig } from 'vite'; import uni from '@dcloudio/vite-plugin-uni'; import { zionUniMpLoadPackagePlugin } from './script/zionUniMpLoadPackagePlugin/vite' export default defineConfig({ plugins: [ uni(), zionUniMpLoadPackagePlugin() ], });
// 这里的packageA对应的就是分包目录 loadMpPackage("packageA", () => { // ... console.log('加载成功') // 这里就可以直接引入分包中对应位置的js，调用其方法 console.log(loadMpPackageModule('/packageA/sdk/index.js')) console.log(loadMpPackageModule('/packageA/sdk/index.js').a()) }, ({mod, errMsg}) => { // ... console.log('加载出错', mod, errMsg) })
使用我的插件后，基本上很多第三方js，或者占用大量空间的js，都可以直接转移到独立的子包中，从而大大减少了对主包的占用。就这样，我把高德地图、省市、IM、音视频等插件都调了过来，最后主包缩小到1M左右。
对了，如果有不吝啬的大佬，也可以给我一星：
2024 年 7 月 26 日：已发现一些错误。它们仅存在于vue2版本中。引入插件后，主包大小反而增大。这个只存在于vue2/版本中。原因是模块被插件接管，打包后计算。有问题（因为分包时需要重定向，导致分包ID有问题，目前没有完美的结局解决方案）。建议开发者根据项目的实际运行情况决定是否采用该方案（可以先引入插件，干运行看看前后主包体积）。感谢评论区老大提出并配合调试。