Taro 解决使用echarts体积过大的问题

背景

近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。

为什么选择Echarts？

因为已有项目使用了ec-echarts, ec-canvas使用了echarts.js, 所以暂时只能沿用, 由于echarts比较大, 建议新开发的简单功能可以使用别的画图组件,

单包超过2M，为什么？

不处理的情况下, 导致Taro认为echarts.js被多个模块所依赖，echarts.js会被打进common.js文件里, 被所有文件引用, echarts大约占用700k, 如果原有逻辑很多, 加上这700k就会超过单包2M限制, 导致上传报错

解决思路

拆分echarts到分包中
压缩其他的功能体积, 比如图片使用cdn等等

如何拆分echarts到分包

为了解决此问题，采用splitChunks打包配置，将echarts单独模块打包，然后在对应的依赖页面（addChunkPages）注入依赖，config/index.js的配置如下：

 const DeviceEchartsChunkName = 'pages/device/echarts';
// 省略含多代码***
// 配置
{
  mini: {
    compile: {
      exclude: [
        // 跳过编译
        path.resolve(__dirname, '..', 'src/pages/device/components/EcCanvas/echarts.js')
      ]
    },
    webpackChain(chain) {
      chain.optimization.sideEffects(false)
      chain.merge({
        optimization: {
          splitChunks: {
            cacheGroups: {
              [DeviceEchartsChunkName]: {
                name: DeviceEchartsChunkName,
                priority: 50,
                test(module) {
                  return /pages[\\/]device[\\/]components[\\/]EcCanvas[\\/]echarts.js/.test(
                    module.resource
                  );
                },
              },
            },
          },
        },
      });
    },
    addChunkPages(pages, pagesNames) {
       pages.set("pages/device/ecg-swk/measure/index", [DeviceEchartsChunkName]);
    }
  }
}

由于echarts.js本身已经经过编译, 所以排除它被webpack再次编译

这样echarts就会被打入到分包里面

但是这样会出现一个如图的问题:

ec-canvas组件找不到echarts模块依赖…

经过一系列的分析，发现Taro对原生微信组件splitChunks分包打包的依赖注入有问题官方还没有修复此问题…

需要在Taro编译成功后，手动修改编译后的ec-canvas.js，注入echarts依赖，如下图：

手动加上即可解决

新的问题

总不能在每次编译后，手动修改编译后的文件吧，如果哪天发版本忘记手动修改，将导致线上问题，风险高。

因此需要写一个Taro打包hack插件，自动注入编译后的echarts依赖代码。

书写Taro编译插件很简单，请参考官方文档即可，插件代码如下：

/*
  解决chunk包没有引用资源的问题
  https://blog.csdn.net/forevercjl/article/details/109536031
*  */
const fs = require('fs');
const path = require('path');
module.exports.default = module.exports = (ctx, options) => {
  // console.log('options:', options)
  ctx.onBuildStart(() => {
  })
  ctx.onBuildFinish(() => {
    const optionsData = Array.isArray(options) ? options : [options];
    for(let i in optionsData){
      const unitData = optionsData[i];
      const target = path.join(ctx.paths.outputPath, unitData.fileDistPath);
      const data = fs.readFileSync(target, 'utf8');
      fs.writeFileSync(target, `${unitData.prependContent};${data}`)
    }
  })
}

然后在config/index.js里面加入plugin的配置

{
    plugins: [
     [path.resolve(__dirname, '..', 'plugin/chunkCacheRequirePlugin'), [
       {
         fileDistPath: 'pages/device/components/EcCanvas/ec-canvas.js', // 目标文件
         prependContent: 'require("../../echarts");' // 在文件最前面添加的代码
       }
     ]]
  ]
}

这样每次编译完之后都会给目标文件前面主动加上require("../../echarts"); 这段引用代码, 防止出错