taro小程序添加Echarts代码包过大解决办法

上回书说到如何在Taro小程序中引入Echarts图表。如果小程序主包代码体量不多可以直接使用，但是如果小程序代码体量大，稍不留神就会导致主包代码超过2M，无法预览也无法真机调试。本文着重介绍一下Taro引入Echarts分包操作以及注意事项。

前文链接，完整流程可以自行查阅 taro小程序添加Echarts实践

分包操作：

1. 将与echarts组件相关都移到分包中，结构目录如下
   
2. 配置app.config.js

...
subpackages: [
    {
   
      root: "subpages",
      pages: [
        'test/index'
      ]
    }
  ],
...

3. 配置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')
      ]
    }