官网分包异步化指南

官网地址： developers.weixin.qq.com/miniprogram…

支持版本：需要基础库版本 2.11.2 或以上

组件的跨分包引用

list来自subPackageB

在分包内容未拉取成功的情况下可以使用

button 和 list 两个自定义组件是跨分包引用组件，其中 button 在渲染时会使用内置组件 view 作为替代， list 会使用当前分包内的自定义组件 simple-list 作为替代进行渲染；在这两个分包下载完成后，占位组件就会被替换为对应的跨分包组件。

加载成功的回调

在基础库 2.24.3 之后，可以使用 wx.onLazyLoadError 监听加载事件。

js的跨分包引用

通过 require 的异步加载对应地址即可加载成功

异步加载非常熟悉，只要使用import或者require就能异步的加载amd,cmd文件，但事情往往没有这么简单。

2.异步加载函数分析

import().then

不可用, 小程序异步加载只能使用commonjs require规范

require.ensure

webpack require.ensure语法在原生小程序中并不支持

require.ensure是一个在Webpack中用于代码分割的方法。它允许将模块按需加载，而不是一次性加载所有模块。这样可以提高应用程序的性能，因为只有在需要时才会加载所需的模块。

require.async require 回调方法

直接使用require方法

require(['../../../packageEcharts/ec-canvas/echarts'], function (chart) {}

会产生对应报错

进入报错源码看看

可以看出webpack使用require的时候会在webpack缓存中判断需要加载key是否存在

如果不存在就创建script去加载对应的url。但是小程序中是没有原生创建标签能力的。此处第一版的做法是不停的在加载资源后重新调用加载资源方法，不停重试，直到通过使用小程序预加载能力把echarts.js加载到本地后，webpack才能读取到文件后会清空对应key，这样就不会进入引入标签流程，而直接使用对应的require文件，从而达到异步获取标签能力。

第二个较为简单的方案是在使用处创建script标签，通过onload去返回对应的文件。但是这样也有缺点

1. 不是小程序推荐的实践，使用不到小程序的预加载能力

2. 因为是通过打包后放cdn形式，所以js能力较为固定，需要专门维护对应js，不够灵活。

但你就说能不能用吧？

能用，但是非常不优雅，不停的重试会引入不可知问题。两种方式都完全没有使用到小程序提供的require本身的能力，既然小程序本身提供了，还是按照官方能力去使用吧。

3.异步分包的最佳实践

1.webpack的require

我们都知道Webpack在打包过程中会对模块的加载进行处理，将require语句替换为__webpack_require__函数调用。使用自己的模块加载系统来管理模块的依赖关系和加载顺序。

__webpack_require__函数是Webpack提供的模块加载函数，它会根据模块的ID进行模块的加载和执行。在Webpack打包过程中，会将每个模块分配一个唯一的ID，并且将模块的代码包装在一个函数中，该函数接受__webpack_require__函数作为参数。Webpack会将其替换为__webpack_require__函数的调用，并传递模块的ID作为参数。通过这种方式，Webpack可以在运行时根据模块的依赖关系和加载顺序来动态加载和执行模块。

所以当使用require方法时，Webpack会将其转换为__webpack_require__.e函数的调用，以实现按需加载模块的功能。webpack_require.e函数会根据传入的模块ID异步加载对应的模块，并返回一个Promise对象，可以通过该Promise对象来处理模块加载完成后的逻辑。

2.不使用webpack require

可以明显发现在webpack环境下，require被改造了，我们需要通知webpack不改造对应的require，才能符合微信官方的能力所以使用，经过阅读webpack文档，需要给require加上标志前缀就能避免webpack对require进行改造

__non_webpack_require__(ECHARTS_SRC, (chart) => {

通过打包后的源码分析可以发现已经从webpack_require.e

符合预期，但查看加载结果发现，echarts实例并未加载到