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

【问题标题】：Optimizing React App’s Size In Production with Amcharts使用 Amcharts 在生产环境中优化 React 应用程序的大小
【发布时间】：2020-12-28 11:42:22
【问题描述】：

我正在使用 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（不使用独立库并手动删除）是否有任何其他可能的方法？

【问题讨论】：

标签： javascript reactjs webpack amcharts amcharts4

【解决方案1】：

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

已成功排除 xlsx 库。

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

【讨论】：