taro小程序添加echarts-taro3-react主包体积优化

*最近在开发时发现两个页面同时引入Echarts组件时，Taro在打包时，会将Echarts打包进主包的vendors文件中，会使得主包体积增大超过2M，导致分包失败，可能会出现无法上传的情况。这里猜测了一下原因，如果多个地方引入同一个组件，Taro在打包时就会将其抽取到公共包中，所以这里就需要我们进行一下手动分包，这里借助了一下webpack的配置。

1.splitChunks分包

splitChunks详细配置可以参考webpack.js.org/plugins/spl…

在config/index.js配置将echart单独打包

mini: {
  webpackChain(chain) {
    chain.merge({
      optimization: {
        splitChunks: {
          cacheGroups: {
            //将echarts单独打包
            echarts: {
              name: "mPackage/echarts",
              minChunks: 1,
              test: (module) => {
                return /[\/]node_modules[\/]echarts-taro3-react[\/]/.test(
                  module.context
                );
              },
              priority: 100,
            },
          },
        },
      },
    });
  }
},

做分包后可以看到Echart被单独打包，并被抽取到我们配置的分包中，这个时候其实主包的体积已经减少了，下面就是在对应的页面引入这个公共的依赖即可；

2.mini.addChunkPages

为某些页面单独指定需要引用的公共文件。

例如在使用小程序分包的时候，为了减少主包大小，分包的页面希望引入自己的公共文件，而不希望直接放在主包内。那么我们首先可以通过 webpackChain 配置 来单独抽离分包的公共文件，然后通过 mini.addChunkPages 为分包页面配置引入分包的公共文件，其使用方式如下：

mini.addChunkPages 配置为一个函数，接受两个参数

• pages 参数为 Map 类型，用于为页面添加公共文件
• pagesNames 参数为当前应用的所有页面标识列表，可以通过打印的方式进行查看页面的标识

例如，为 pages/index/index 页面添加 eating 和 morning 两个抽离的公共文件：

对应的配置如下：

mini: {
  addChunkPages(pages) {
    pages.set("mPackage/pages1/index", ["mPackage/echarts"]);
    pages.set("mPackage/pages/index", ["mPackage/echarts"]);
  },
 }