背景

近期笔者在使用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"); 这段引用代码, 防止出错