Echarts在Taro微信小程式開發中的踩坑記錄

阿新 • • 發佈：2020-11-09

背景

近期筆者在使用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，快樂的做完需求，準備上傳程式碼釋出微信小程式體驗版，坑就此開始...

Echarts在Taro微信小程式開發中的踩坑記錄

當單包超過2M上限，則上傳程式碼出現異常，出現上面彈窗提示。

微信小程式官方要求，單包不超過2M，整包不超過16M

遇到單包超過2M，優化方案有如下兩種：

微信分包載入subpackages
單包體積優化（縮減程式碼、壓縮、靜態資源CDN等等）

由於筆者本次開發需求屬於新功能，所以把新功能模組採用獨立的分包路由載入，但分包後，還是出現單包超過2M的限制。

Echarts在Taro微信小程式開發中的踩坑記錄

經過分析發現業務模組引用的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在Taro微信小程式開發中的踩坑記錄

echarts-for-weixin元件找不到echarts模組依賴...

經過一系列的分析，發現Taro對原生微信元件splitChunks分包打包的依賴注入有問題官方還沒有修復此問題...

需要在Taro編譯成功後，手動修改編譯後的ec-canvas.js，注入echarts依賴，如下圖：

Echarts在Taro微信小程式開發中的踩坑記錄

經過上面的處理，終於正常執行，單包超過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圖表庫的讀者一些幫助。

到此這篇關於Echarts在Taro微信小程式開發中的踩坑記錄的文章就介紹到這了,更多相關Taro微信小程式 Echarts內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！