Taro 2.x 配置 echarts.js 文件到微信小程序的分包中

参考资料

问题概述

用 Taro 开发微信小程序时，由于项目中有使用到 ECharts ，所以项目中会有个 echarts.js 的源码文件，很大，约 500 KB 。如果不进行额外配置，这个大小是计算在主包大小里面的，而微信小程序对于主包大小有限制为 2M ，所以最好是将 echarts.js 能拆分到分包中去。

目录结构调整

具体哪些文件会计算到主包大小里去呢？经过测试是这样的，如果一个文件被大于等于两个地方引用了，那这个文件就会被打包到 commom.js 中，最终体积是计算到主包中的。（所以像项目中的基础组件啊、工具函数的都是在主包中的）

所以要把 echarts.js 这个文件从主包中拆分出去的第一步就是，把 echarts.js 等相关的文件以及页面放在同一个目录内，然后把这个目录配置为一个分包。也就是比如现在项目中有页面 a、b、c 三个页面有使用 ECharts ，那就把这三个页面加上 ECharts 相关作为一个分包。

配置 webpackChain 和 addChunkPages

在 mini 中加入 webpackChain 和 addChunkPages 配置。

// config/index.js
const echartsChunkName = 'pages/chart/echartsChunk'

mini: {
  compile: {
    exclude: [path.resolve(__dirname, '../src/pages/chart/Echarts/ec-canvas/echarts.js')],
  },
  webpackChain(chain, webpack) {
    // 把 echarts.js 打包为单独的文件，避免被打包到 common.js 中增加主包大小
    chain.merge({
      optimization: {
        splitChunks: {
          cacheGroups: {
            [echartsChunkName]: {
              name: echartsChunkName,
              priority: 50,
              test(module) {
                return (module.resource || '').endsWith('chart/Echarts/ec-canvas/echarts.js')
              },
            },
          },
        },
      },
    })
    // 在打包后的 ec-canvas.js 文件开头补充 require
    chain.plugin('banner').use(
      new webpack.BannerPlugin({
        banner: "require('../../echartsChunk'),",
        raw: true,
        include: /chart[\\/]Echarts[\\/]ec-canvas[\\/]ec-canvas.js/,
      }),
      [],
    )
  },
  addChunkPages(pages, pagesNames) {
    pages.set('pages/chart/aaa/index', [echartsChunkName])
    pages.set('pages/chart/bbb/index', [echartsChunkName])
    pages.set('pages/chart/ccc/index', [echartsChunkName])
  },
},

webpackChain 和 addChunkPages 都需要配置，并且所有使用到 ECharts 的页面都需要在 addChunkPages 中设置，否则在微信开发者工具上可能会报错。

关于自动在文件开头加上 require('../../echartsChunk'), 可以使用 Webpack 插件 BannerPlugin | webpack 来实现。

怎么看主包和分包的大小

在开发者工具右上角「详情-基本信息-上次预览」可以看到包的大小，并支持按包大小排序。

二维码预览那里的代码包大小信息可能会显示上上一次预览时包的大小。所以最好以详情中显示为准。

（如果发现包大小在配置前后没变，可以试试重新打开开发者工具，有时候就是会抽风啊 …）

findxc / blog