Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Option to bundle-split pega-component-map #240

Open
wimbarelds opened this issue Nov 16, 2023 · 3 comments
Open

Option to bundle-split pega-component-map #240

wimbarelds opened this issue Nov 16, 2023 · 3 comments

Comments

@wimbarelds
Copy link

Is your feature request related to a problem? Please describe.
I am using react-sdk-components to embed Pega views inside a non-pega Portal, but when importing from either react_pconnect.jsx or sdk_component_map.js, my bundle-size balloons to over 1.5 MB (Minified). From what I can tell, this is because sdk-pega-component-map.js and all components on that map are loaded unconditionally- whether a given component is or is not available on the sdk-content-server, or on the local component map.

Am I doing something wrong here? If not, can either alternate options be made available?

Describe the solution you'd like

This is not strictly what I want to happen, but merely one way to solve this issue.
If in sdk-pega-component-map.js, the following:

import SomeComponent from './SomePath/SomeComponent.jsx';
const pegaSdkComponentMap = {
  'SomeComponent': SomeComponent,
  ...,
}

Were changed to something like:

import { lazy } from 'react';

const pegaSdkComponentMap = {
  'SomeComponent': lazy(() => import('./SomePath/SomeComponent.jsx')),
  ...,
}

Only components that are not available from the SDK content server and the local component map would be loaded.

Describe alternatives you've considered
Outside of not using the sdk-component-map and react_pconnect, I dont think there are any alternatives(?).

A colleague of mine did notice that the (not embedded) Portal does not have this same issue, and instead appears to load components as needed.

Additional context
Add any other context or screenshots about the feature request here.

@wimbarelds
Copy link
Author

I just got done updating to all the latest versions, and the issue has gotten worse.

When I npx @pega/dx-component-builder-sdk create a Text-Input component, the custom-sdk version of that component uses import { getComponentFromMap } from '@pega/react-sdk-components/lib/bridge/helpers/sdk_component_map';, which in turn imports all other components through the component map, causing the bundles generated for this, and other custom components to be >= 1.5 MiB in filesize.

@niallriddell
Copy link
Collaborator

Thanks for using our react sdk components. We're reviewing your feedback within the team and we will revert back as soon as we've completed this.

@wimbarelds
Copy link
Author

Thanks for responding! With regards to the issue of all compponents being included in individual component bundles; it seems to me like using some kind of context provider for the component map would be ideal.

Though, this itself doesn't resolve that the base-bundle when importing PConnect also already has this issue.

A good solution would be to have the PConnect Component also use useContext(ComponentMapContext), and to separate generating of the sdk component map (also allowing developers to provide their own implementation for the component map).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants