使用 Amcharts 在生产环境中优化 React App 的大小

Question

我正在使用 amcharts (amcharts4) 和 React 应用程序（使用 cra 生成）。

我能够使用 webpack.config 文件 (node_modules/react-scripts/config/webpack.config.js) 中的 webpack Externals 成功排除一些依赖项（cpexcel、canvg、pdfmake），如下所示：

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

我也想排除 xlsx 依赖项，但在使用此配置构建时会抛出错误：

externals: [
      function (context, request, 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 功能。

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

Answer 1

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

已成功排除 xlsx 库。

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

使用 Amcharts 在生产环境中优化 React App 的大小

Optimizing React App’s Size In Production with Amcharts

javascript

amcharts

reactjs

webpack

amcharts4