使用 Amcharts 在生产中优化 React 应用程序的大小

问题描述

我将 amcharts (amcharts4) 与 React 应用程序（使用 cra 生成）一起使用。

我能够像这样在 webpack Externals 文件 webpack.config 中使用 (node_modules/react-scripts/config/webpack.config.js) 成功排除一些依赖项（cpexcel、canvg、pdfmake）：

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

我还想排除 xlsx 依赖项，但在使用此配置构建时会引发错误：

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

错误是：

$ react-scripts build
Creating an optimized production build...
Failed to compile.

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

我没有使用 amcharts 的任何 csv 功能。

是否有其他可能的方法来排除 xlsx 中的 amcharts（不使用独立库并手动删除）？

解决方法

错误是因为react-chartjs-2。我尝试了几个图表库，但忘记删除该库。

已成功排除 xlsx 库。

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