本文轉載自【微信公眾號：前端人，ID:FrontendPeople】經微信公眾號授權轉載，如需轉載與原文作者聯繫
背景
近期筆者在使用Taro進行微信小程序開發，當引入Echarts圖表庫時，微信檢測單包超限2M的一系列優化措施的踩坑記錄，期望能指導讀者少走一些彎路。
為什麼選擇Echarts？
微信小程序目錄市面上使用最多的兩款圖表庫，如下：
echarts-for-weixin——echarts微信小程序版本wx-charts——基於微信小程序的圖表庫對比兩款圖表庫優缺點剛好相反。
echarts-for-weixin：功能強大，但體積非常大wx-charts：功能相對簡單，但體積小由於筆者對echarts使用較熟悉，且需求圖表需要支持的部分功能wx-charts不支持，所以最終選擇使用echarts-for-weixin，踩坑之旅就此開始。
單包超過2M，如何處理？
筆者引入echarts-for-weixin，快樂的做完需求，準備上傳代碼發布微信小程序體驗版，坑就此開始...
當單包超過2M上限，則上傳代碼出現異常，出現上面彈窗提示。
微信小程序官方要求，單包不超過2M，整包不超過16M
遇到單包超過2M，優化方案有如下兩種：
微信分包加載subpackages單包體積優化（縮減代碼、壓縮、靜態資源CDN等等）由於筆者本次開發需求屬於新功能，所以把新功能模塊採用獨立的分包路由加載，但分包後，還是出現單包超過2M的限制。
經過分析發現業務模塊引用的echarts組件，會被Taro打包到common.js模塊，導致所有的分包模塊都會重複計算echarts的size，導致舊分包模塊超過2M的限制。
為什麼echarts-for-weixin會被打包到common.js模塊？
原因是echarts被echarts-for-weixin組件和外部業務組件所依賴，導致Taro認為echarts.js被多個模塊所依賴，所以打包到common.js。
為了解決此問題，採用
splitChunks
打包配置，將
echarts
單獨模塊打包，然後在對應的依賴頁面（
addChunkPages
）注入依賴，配置如下：
// echartChunkName echarts打包後的輸出路徑mini: { webpackChain(chain) { chain.merge({ optimization: { splitChunks: { cacheGroups: { [echartChunkName]: { name: echartChunkName, priority: 50, test(module) { return /subpackages[\\/]homeworkPage[\\/]studyData[\\/]ChartLine[\\/]ec-canvas[\\/]echarts.js/.test( module.resource ); }, }, }, }, }, }); }, addChunkPages(pages, pagesNames) { pages.set("subpackages/homeworkPage/studyData/ChartLine/index", [echartChunkName]); pages.set("subpackages/homeworkPage/studyData/ChartLine/ec-canvas/ec-canvas", [echartChunkName]); } }
Taro通過mini.webpackChain自定義webpack配置，請參考官網文檔webpack分包配置splitChunks，請參考官網文檔通過mini.addChunkPages設置分包依賴，請參考官網文檔經過以上處理，common.js體積恢復正常，以為就此結束。結果新的坑又出現了......如下圖:
echarts-for-weixin組件找不到echarts模塊依賴...
經過一系列的分析，發現Taro對原生微信組件splitChunks分包打包的依賴注入有問題官方還沒有修復此問題...
需要在Taro編譯成功後，手動修改編譯後的ec-canvas.js，注入echarts依賴
如下圖：
經過上面的處理，終於正常運行，單包超過2M的問題也全部解決。
以為到此就結束了？
筆者總不能在每次編譯後，手動修改編譯後的文件吧，如果哪天發版本忘記手動修改，將導致線上問題，風險高。
因此需要寫一個Taro打包hack插件，自動注入編譯後的echarts依賴代碼。
書寫Taro編譯插件很簡單，請參考官方文檔即可，插件代碼如下：
const fs = require('fs');const path = require('path');module.exports.default = module.exports = (ctx, options) => {ctx.onBuildFinish(() => { console.log('echarts構建hack注入') const target = path.join(ctx.paths.outputPath, 'subpackages/homeworkPage/studyData/ChartLine/ec-canvas//ec-canvas.js'); const data = fs.readFileSync(target, 'utf8'); fs.writeFileSync(target, `require("../../echartCommon");${data}`) })}
註：Taro版本2.2以上才支持自定義插件
最後
Echarts在Taro微信小程序開發踩坑記錄到此接近尾聲，希望能給正準備在Taro微信小程序使用echarts圖表庫的讀者一些幫助。