Echarts 가 Taro 위 챗 애플 릿 개발 에서 의 구덩이 밟 기 기록

배경
최근 에 필 자 는 Taro 를 이용 하여 위 챗 애플 릿 개발 을 실시 했다.Echarts 도표 라 이브 러 리 를 도입 할 때 위 챗 검 측 패키지 가 2M 을 초과 하 는 일련의 최적화 조치 의 구덩이 밟 기 기록 은 독자 들 에 게 시행 착 오 를 적 게 하도록 지도 할 수 있 기 를 기대한다.
왜 Echarts 를 선 택 했 습 니까?
위 챗 애플 릿 디 렉 터 리 시장 에서 가장 많이 사용 되 는 두 개의 도표 라 이브 러 리 는 다음 과 같다.
echarts 위 챗 애플 릿 버 전
위 챗 애플 릿 을 기반 으로 한 도표 라 이브 러 리두 개의 도표 창고 의 장단 점 을 비교 해 보면 정반 대 이다.
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 가 여러 모듈 에 의존 하고 있다 고 생각 하여 comon.js 로 포장 되 었 기 때 문 입 니 다.
이 문 제 를 해결 하기 위해 splitChunks 패키지 설정 을 사용 하여 echarts 단독 모듈 을 패키지 한 다음 에 해당 하 는 의존 페이지(addChunks Pages)에 의존 도 를 주입 합 니 다.설정 은 다음 과 같 습 니 다.

// 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 을 통 해 웹 팩 설정 을 사용자 정의 합 니 다.홈 페이지 를 참고 하 십시오echarts-for-weixin
웹 팩 하 도 급 설정 splitChunks,홈 페이지 참조wx-charts
mini.addChunkPages 를 통 해 하 도 급 의존 설정,홈 페이지 참조문서.
이상 의 처 리 를 통 해 comon.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 도표 라 이브 러 리 를 사용 하려 는 독자 들 에 게 도움 을 주 고 싶 습 니 다.
이 쯤 에서 Echarts 가 Taro 위 챗 애플 릿 개발 에서 의 구덩이 밟 기 기록 에 관 한 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 Taro 위 챗 애플 릿 Echarts 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 부 탁 드 리 겠 습 니 다!