组件的跨分包引用

list来自subPackageB

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

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

加载成功的回调

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

js的跨分包引用

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

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

2.异步加载函数分析

import().then

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

require.ensure

webpack require语法并不支持

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文件

你就说能不能用吧？

能用，但是非常不优雅，不停的重试会引入不可知问题。这种方式完全没有使用到小程序提供的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