amCharts の pdfmake を webpack の externals に指定する

12874 ワード
AmCharts webpack webpack テキストリンク

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 で使用の pdfmake などが maximumFileSizeToCacheInBytes を超過しているとのこと

ビルドのファイルサイズの確認

source-map-explorer で確認

確かに 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