FDK: App file exceeds threshold size (2MB)

App Platform
,
1

Hello!

I am working on a Freshdesk app built with React + TypeScript.
I’ve successfully updated it recently in such way, so that the project is built not with separate npm scripts, but with the new fdk frontend frameworks support that appeared in fdk 6.10.0.

However, I am facing the following issue. When I’m building the project, I get the following error:

$ fdk run
The local server could not be started due to the following issue(s):
[ERROR] App file exceeds threshold size(2MB): app/vendors.b6fc9720.js

I’ve faced this issue previously, and the way to bypass it was to specify the link to the external dependency JS script in the HTML template (<script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script>) and to use the following property externals in the webpack.config.js:

{
    ...,
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
        "freshdeskClient": "app",
        "xlsx": "XLSX"
    },
    ...

I would like to move all such external dependencies/scripts from the HTML template to npm packages.
As you may notice, I’ve got a package named “xlsx”, which appears to be huge, but at the same time very important one for the project. When I install it + react and react-dom packages (according to the guide), the ./app/vendors.*.js file becomes 2.4 MB.

The question is:

  • Is there any way to bypass this error/validation or to disable it in fdk? Or should I update the webpack config somehow in such a way, so that the vendors bundle gets split into multiple smaller files?
3 Likes
3

Hey @ilya.belyavskiy,

Thanks for bringing this to our notice, To answer your questions,

  1. is it possible to bypass the validation, not officially,
  2. Can the webpack config be updated to split this into chunks, yes it possible, but splitting in to chunks will help reduce the file size, but the size of the ZIP will still be the same, so let me check if there is another way to overcome this and get back to you.

Also could you please point me to the xlsx package if it’s available publicly?

Stay Safe :slight_smile:

3 Likes
4

Thank you for the response!

Here is the link to this the package.

It would be great to learn both of these options :slight_smile:

Currently the zip file size does not scare me as much as the file size of this bundled vendors.*.js file.
Should I be aware of it, too? Are there any limits for the packed app ZIP size?

By the way, just wanted to notice that for some reason the basic React-based Freshdesk app Webpack/dependencies configuration produces the vendors.*.js file size of ~1.4 MB. That’s quite close to 2.0 MB limit, too :sweat_smile:

3 Likes
5

Hey @ilya.belyavskiy,

Here are couple of solutions,

we have recently found out that FDK validates the file size for the immediate files inside app folder,
for eg, assets placed directly inside app folder, but if the assets are placed inside a subfolder of the app folder like shown below the validation doesn’t apply! Though this needs to be fixed we will make sure the large files support is taken care during the fix.

image
image1355×586 24.1 KB

so if you change the output folder to a format app/${some_folder}/ (same as the default settings) the size restriction will not be imposed.

I also found this great article to manage bundle sizes using chunks.

Hope this helps!

Stay Safe :slight_smile:

2 Likes
6

@velmurugan Thank you for the suggested approaches!
I’ve decided to take the second one and spent a couple of hours trying to figure out how to prevent creation of the vendors-*.*.js file(s) larger than 2MB - the funny thing is that despite all changes to the optimization prop webpack still produced the vendors-node_modules_react-dom_cjs_react-dom_development_js-*.*.js file larger than 2MB (~2.2MB).

What helped me to solve this was changing the devtool prop in webpack.config.js from 'inline-source-map' to 'source-map' as configured in the guide “Writing custom webpack configs for single page applications”.
Now the vendors.*.js file is 976 KB and the fdk error is gone :tada:

4 Likes