Dependency sizes

[kanadaj]

AmCharts 4 seems to have some ridiculously huge dependencies such as pdfmake and xlsx - could you make these optional? AmCharts 4 is already huge, and these libraries don't seem necessary...

[darlesson]

@kanadaj, is this a Webpack and Vue setup? I recommend you to check https://www.amcharts.com/docs/v4/tutorials/preventing-vue-js-from-loading-external-libraries/ if that is the case.

You could try to set externals as in externals: /(xlsx|pdfmake|canvg)$/gi if you are only using Webpack.

[eliashdezr]

@darlesson what about Angular 2+ setups?

[darlesson]

Angular uses Webpack. Before it was possible to eject webpack.config.js file, but that is no longer possible. Still we need to modify webpack's configuration file to be able to exclude these files.

One possible option is to use ngx-build-plus. You can follow their instructions and add the webpack.extra.js file with the following content:

module.exports = {
    "externals": {
        "pdfmake": "pdfmake",
        "xlsx": "xlsx",
        "canvg": "canvg"
    }
}

[genichiro]

@kanadaj, is this a Webpack and Vue setup? I recommend you to check https://www.amcharts.com/docs/v4/tutorials/preventing-vue-js-from-loading-external-libraries/ if that is the case.

You could try to set externals as in externals: /(xlsx|pdfmake|canvg)$/gi if you are only using Webpack.

I succeeded in excluding xlsx.js using this setting. But pdfmake.js and vsf_fonts.js are still there.

What should I do?

[Pauan]

@kanadaj AmCharts 4 seems to have some ridiculously huge dependencies such as pdfmake and xlsx - could you make these optional?

They are already optional, and will only be loaded when they are actually used.

---

@genichiro Is pdfmake a separate file, or is it included in the bundle? Judging from your screenshot, it looks like it is in a separate vendors.pdfmake.js file.

If it is a separate file, you can safely ignore it, because it will only be loaded when it is actually used.

You can use the browser's developer tools to verify that the vendors.pdfmake.js file is not being loaded.

[darlesson]

@genichiro I tried few solutions and I could find just one that works by removing PDFMake from the regex and using a function instead:

  externals: [/(xlsx|canvg)/, function(context, request, callback) {

    if (/(pdfmake)/.test(request)) {
      return callback(null, 'commonjs ' + request);
    }

    callback();
  }]

[kernel-memory-dump]

@darlesson awesome, works like a charm, thank yoouuuuu

[eliashdezr]

Is there any news on how to make this work with angular-cli?

[Pauan]

@eliashdezr With Angular, it does not load the files if they aren't used, so it already works just fine.

You can verify this in the browser's dev tools (specifically, the Network tab).

[erictuvesson]

@Pauan Would it be possible to create a build without pdfmake? it's just causing a lot of issues everywhere from slowing down compile time and compile errors etc.

[eliashdezr]

Agree, pdf export is not a basic feature that should be bundled and imported by default, it is really annoying to deal with it while developing.

[erictuvesson]

This is the only thing blocking me from upgrading our website to webpack 4, any updates?

[martynasma]

How about this solution proposed earlier in this thread?

https://github.com/amcharts/amcharts4/issues/569#issuecomment-440143826

[Pauan]

@erictuvesson If you're getting compile errors, that's a bug and you should report it. There shouldn't be any negative effects at all (except maybe for increased compile time).

As for a separate build, you can always use the <script> tag version which is precompiled, so there shouldn't be any impact on compile times.

---

@eliashdezr It's not any different from how we handled exporting in V3: it creates a separate file which is auto-loaded only when needed.

Could you explain more about how it's affecting your development? Maybe we can improve that.

[martynasma]

FYI, Webpack tutorial updated: https://www.amcharts.com/docs/v4/getting-started/integrations/using-webpack/#Large_file_sizes

[erictuvesson]

@martynasma That didn't work the last time we tried to solve it (5 months ago), but it still doesn't solve my compiler error. :(

---

@Pauan With the upgrade to webpack 4 babel was removed and amcharts is using babel for the experimental dynmaicImport. I could add back babel, but that includes adding a new loader etc, seems like a lot of steps to just get amcharts working with webpack 4.

Unfortunately I am using Typescript so I can't just switch to use <script> tag, but that would solve the compile error. Are there any amcharts typings for typescript?

[Pauan]

That didn't work the last time we tried to solve it (5 months ago)

Make sure you're using a function for the externals (as described in the link @martynasma posted).

With the upgrade to webpack 4 babel was removed and amcharts is using babel for the experimental dynmaicImport.

No, we have never required or used Babel. Webpack has built-in support for import() (and has had built-in support for a long time, even in Webpack 3).

It sounds like you are running into this Webpack bug. We have a section at the top of our Webpack tutorial which explains how to workaround this bug.

Unfortunately I am using Typescript so I can't just switch to use <script> tag, but that would solve the compile error. Are there any amcharts typings for typescript?

Right, losing types is not fun. You can use things like declare var am4core: any; to just get it working.

As for more comprehensive typings for <script>, we don't have that (since our npm package does have typings), and we don't really want to bloat things up for vanilla JavaScript users. But we'll consider it.

[erictuvesson]

It doesn't seem like xlsx, canvg or pdfmake is included in the build now even without the externals. 👍

I did some changes to my webpack config and added babel and it works now.

Thanks for the help!

[havietduc91]

FYI, Webpack tutorial updated: https://www.amcharts.com/docs/v4/getting-started/integrations/using-webpack/#Large_file_sizes

Thank for @martynasma answer, it's work for me

[matinfo]

Config that worked for me:

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

"@craco/craco": "^5.7.0",
"craco-antd": "^1.19.0",

[NaanProphet]

One possible option is to use ngx-build-plus. You can follow their instructions and add the webpack.extra.js file with the following content:

module.exports = {
    "externals": {
        "pdfmake": "pdfmake",
        "xlsx": "xlsx",
        "canvg": "canvg"
    }
}

Success with ngx-build-plus in Angular 9. I followed steps 2, 3, and 5 from the Getting Started section. Reminder to get the right version.

However, I needed to use the regex/function approach to get canvg and pdfmake to be properly excluded. Otherwise, only xlsx was being excluded. My final webpack.partial.js file looks like:

const webpack = require('webpack');

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

[buddhagrg]

Hi, I have installed amchart4 and in webpack config file added external function as follows;

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

I have another npm package xlsx (https://www.npmjs.com/package/xlsx) in the app for exporting purpose. In the above external function, is there any way that i can exclude the xlsx inside that amchart package only ? I don't know why but i just think the xlsx inside amchart as default has been a major issue for me. Is there anyway we can solve this issue ?

This is the what it looks like now, i just wanted to remove the xlsx only from the amchart package ?

[roccomaniscalco]

Anyone know of a rollup solution?

[constzaytsev]

Anyone know of a rollup solution?

Try

// rollup.config.js

export default {
    //...,
    external: (id) => /xlsx|canvg|pdfmake/.test(id)
};