上回书说到如何在Taro小程序中引入Echarts图表。如果小程序主包代码体量不多可以直接使用,但是如果小程序代码体量大,稍不留神就会导致主包代码超过2M,无法预览也无法真机调试。本文着重介绍一下Taro引入Echarts分包操作以及注意事项。
前文链接,完整流程可以自行查阅 taro小程序添加Echarts实践
分包操作:
- 将与echarts组件相关都移到分包中,结构目录如下
- 配置app.config.js
...
subpackages: [
{
root: "subpages",
pages: [
'test/index'
]
}
],
...
- 配置config/index
导致包文件过大的“罪魁祸首”就是ec-canvas文件夹下的echarts.js文件。所以我们需要解决的问题是,分包使用Echarts组件不能将echarts.js打包到主包的common.js里面。Taro机制认为一个js文件被多个模块依赖会将该js抽离到common.js。虽然我们关于Echarts相关的文件都放在subpages里面,但是如果引用多次还是会抽离到主包common.js。所以我们需要使用splitChunks将Echarts部分单独打包,然后使用addChunkPages 往页面注入依赖。
// config/index.js
mini: {
compile: {
exclude: [
// 跳过编译
path.resolve(__dirname, '..', 'src/subpages/components/ec-canvas/echarts.js')
]
}