webcomponents-react-seed: big build file size

[Dingyj3178]

Hi,

I'm trying to build a demo app by using webcomponents-react-seed.
I found the size of the webcomponents-react-seed build file is too big to accept for loading.

Reprocedure:
1.
npx create-react-app build-test --template @ui5/webcomponents-react-seed
2.
yarn build
3.

npm install source-map-explorer 
source-map-explorer 'build/static/js/*.js

as you can see, no source file has 8 MB.

any workaround to reduce the size for production use?

BR,

[Dingyj3178]

I think I found the cause.
it's the import statement in index.js file.
Is this mandatory for running ui5-webcomponents-react?

// import 'react-app-polyfill/ie11';
// import 'react-app-polyfill/stable';
// import '@ui5/webcomponents-base/dist/features/browsersupport/IE11.js';
// import '@ui5/webcomponents-react-base/polyfill/IE11';
// import '@ui5/webcomponents-icons/dist/json-imports/Icons.js';

// import '@ui5/webcomponents/dist/Assets.js';
// import '@ui5/webcomponents-fiori/dist/Assets.js';
// import '@ui5/webcomponents-react/dist/Assets';

[MarcusNotheis]

Hey @Dingyj3178,
thanks for reporting.
All those imports are partially required, but not absolutely mandatory to run the app.

Let me comment on the individual imports:

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
import '@ui5/webcomponents-base/dist/features/browsersupport/IE11.js';
import '@ui5/webcomponents-react-base/polyfill/IE11';

All those imports are only required for running in IE11. With our next version (0.14.0), we will deprecate IE11 and remove those imports. If you don't need IE11, you can safely remove those.

---

import '@ui5/webcomponents-icons/dist/json-imports/Icons.js';

This import statement is importing all possible Icons. You can omit this "overall" import and import Icons on an individual basis when you us them, e.g. import @ui5/webcomponents-icons/dist/add when you use the add icon somewhere on the page.
I think we should change this in our seed as well, it's not optimal to have all possible icons (of which 90% will most likely be unused in the App) in the initial chunk.

---

import '@ui5/webcomponents/dist/Assets.js';
import '@ui5/webcomponents-fiori/dist/Assets.js';
import '@ui5/webcomponents-react/dist/Assets';

Those files contain additional themes (e.g. Fiori 3 Dark, Belize, High Contrast Themes) as well as translations.
If you only need english texts and no other theme than the default Fiori 3, you can omit those imports as well.
These 3 imports are also the main reason for this very big chunk because they contain all possible translations.

The UI5 Web Components Team is already aware of this "inefficient" bundling and is already working on solution (SAP/ui5-webcomponents#2740) for that.

In the meantime if you need e.g. only certain languages, you can also manually import the required files:

import { registerI18nBundle } from "@ui5/webcomponents-base/dist/asset-registries/i18n";
import enWebComponentsFiori from "@ui5/webcomponents-fiori/dist/generated/assets/i18n/messagebundle_en.json";
import deWebComponentsFiori from "@ui5/webcomponents-fiori/dist/generated/assets/i18n/messagebundle_de.json";
import enWebComponentsReact from "@ui5/webcomponents-react/dist/assets/i18n/messagebundle_en.json";
import deWebComponentsReact from "@ui5/webcomponents-react/dist/assets/i18n/messagebundle_de.json";
import enWebComponents from "@ui5/webcomponents/dist/generated/assets/i18n/messagebundle_en.json";
import deWebComponents from "@ui5/webcomponents/dist/generated/assets/i18n/messagebundle_de.json";

registerI18nBundle("@ui5/webcomponents", { en: enWebComponents, de: deWebComponents });
registerI18nBundle("@ui5/webcomponents-fiori", { en: enWebComponentsFiori, de: deWebComponentsFiori });
registerI18nBundle("@ui5/webcomponents-react", { en: enWebComponentsReact, de: deWebComponentsReact });

This code snippet would import only the English and German translations and save you a couple of megabytes bundle size.

[Dingyj3178]

Hi @MarcusNotheis

Thank you for the kind explanation!
Now I understand which component I need to remain.

BR,