amCharts pdfmake를 webpack externals로 지정

amCharts를 React 프로젝트에 사용하면 GitHub Actions에서 다음과 같은 오류가 발생합니다.

{file path} is {file size} MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

구성은 다음과 같습니다.

package.json

{
  "dependencies": {
    "@amcharts/amcharts4": "^4.9.35",
    "webpack": "4.43.0"
  },
}

amCharts 부하의 pdfmake 때문입니까?

amCharts에서 maximumFileSizeToCacheInBytes에서 문제가 발생한다는 issue
Dependency sizes #569 - amCharts/amCharts4

위의 내용에 따르면 amCharts에서 사용 된 pdfmake 등이 maximumFileSizeToCacheInBytes를 초과했습니다.

빌드 파일 크기 확인

source-map-explorer에서 확인

처음 npm run build -- --stats에서 파일 크기를 얻으려고했지만
폐지되었기 때문에 source-map-explorer를 사용으로 전환
How to build bundle-stats.json in create react app? - stackoverflow

확실히 pdfmake (그 외 xlsx)의 크기가 큰 것을 확인

webpack의 externals를 지정에 의해 빌드에 포함하지 않게 ...

위의 Dependency sizes #569 - amCharts/amCharts4에서,
webpack externals을 지정하여 빌드에서 제외 할 수 있었기 때문에 다시 빌드

webpack.exterals

    externals: {
      pdfmake: 'pdfmake',
      xlsx: 'xlsx',
      canvg: 'canvg',
    },

재확인했는데 이하에서,



감소하지 않음 ...

externals를 함수로 지정

위의 issue를 살펴보면 externals 함수 형식으로 지정하면 좋을 것입니다.

webpack.externals.function

    externals: [
      /(xlsx|canvg)/,
      function (context, request, callback) {
        if (/(pdfmake)/.test(request)) {
          return callback(null, 'commonjs ' + request);
        }
        callback();
      },
    ],

여기의 설명은 공식 문서에도있었습니다.
Large file sizes - Using Webpack - amCharts 4 Documentation

webpack.externals.function.official

  externals: function (context, request, callback) {
    if (/xlsx|canvg|pdfmake/.test(request)) {
      return callback(null, "commonjs " + request);
    }
    callback();
  }

이를 적용하고 재시도

compile-error

chunk runtime-main [entry]
Cannot convert undefined or null to object

뭔가 오류가 ...

pdfmake 의 설명을 상세하게 할 필요가 있는가?

externals의 지정을 괴롭혀 보았는데, pdfmake 이외의 xlsx 등은 기술대로 제외되는 것을 확인
그래서 source-map-explorer의 출력을 검토해 보았는데, pdfmake의 표시는 xlsx와 차이가 있음을 알 수 있습니다.





이것 externals 의 정규 표현에 변경을 가야 하는지 생각해, 다음과 같이

webpack.externals.function.pdfmake-detailed

    externals: function (context, request, callback) {
      if (/xlsx|canvg|pdfmake[/]build|[.]internal[/]pdfmake/.test(request)) {
        return callback(null, 'commonjs ' + request);
      }
      callback();
    },

표시되는 pdfmake의 2 종류인 이하에 합치하도록 변경

pdfmake/build/pdfmake.js

src/.internal/pdfmake/vfs_fonts.ts

다시 실행 ... 정상적으로 종료source-map-explorer에서 확인한 결과,



했어.pdfmake이 사라졌는지 확인

그러나 어쨌든 설정했던 Jest가 GitHub Actions를 깨고 갔다.

・・・라고 생각하면vfs_fonts 쪽은 확실히 잔류해 버리고 있었다・・・



우선 유효하게 된 기술에 대해서

webpack.externals.function.pdfmake-detailed-valid

    externals: function (context, request, callback) {
      if (/xlsx|canvg|pdfmake[/]build/.test(request)) {
        return callback(null, 'commonjs ' + request);
      }
      callback();
    },

Jest 오류 정보

Angular에서도 발생한 사례
SyntaxError: Unexpected token 'export' with jest in Angular 9 project #2471 - amCharts/amCharts4

jest-error

    Details:

    ～\node_modules\@amcharts\amcharts4\charts.js:7
    export { GaugeChartDataItem, GaugeChart } from "./.internal/charts/types/GaugeChart";     
    ^^^^^^

    SyntaxError: Unexpected token 'export'

Using amCharts with Jest - amCharts 4 Documentation

amCharts가 svg를 사용하지만 Jest는 svg를 지원하지 않습니다

use Puppeteer with Jest