How to determine that source import should be changed in the component?

When working on the de-prioritization of specific components we need to change webpack chunk names for lazy-loaded sub-component to control code splitting.

In such cases, we can’t override and re-export the sub-components because webpack will include the components in multiple chunks (the original ones and the new ones we’ve defined) leading to unexpected contamination in chunks, therefore this needs to be done differently.

What is the best way to do it?

The recommended approach is to copy the files themselves next to the project component and change their names to {ComponentName}.souce.component.js and {ComponentName}.theme.component.js (assuming it exists) accordingly.

The resulting file structure will look something like this:

> {ComponentName}
|-- {ComponentName}.component.js
|-- {ComponentName}.source.component.js
|-- {ComponentName}.theme.component.js
...

<aside> 📌 In some cases the project might not have a theme package or the theme package might not extend the original component in that case there will be no need for this file {ComponentName}.theme.component.js

</aside>

Once we have the files in our project scope, we need to update the imports for each of the theme and project component overrides into relative imports that point to the new source and theme components.

// {ComponentName}.theme.component.js
import {
	ComponentName as SourceComponentName
} from "./{ComponentName}.source.component";

// {ComponentName}.component.js
import {
	ComponentName as ThemeComponentName
} from "./{ComponentName}.theme.component";

Now we can go ahead with changing the components’ imports into lazy-loaded. Then we need to change imports in the theme and project overrides to use the exported lazy-loaded component from the source. Otherwise, all that we’ve done will amount to nothing as the components will still be imported inline.

// {ComponentName}.source.component.js
export const SomeComponent = lazy(() => import(
	/* webpackMode: "lazy", webpackChunkName: "some-component" */
	"Component/SomeComponent"
));

// {ComponentName}.theme.component.js
import { SomeComponent } from "./{ComponentName}.souce.component";
export * from "./{ComponentName}.souce.component";

// {ComponentName}.component.js
import { SomeComponent } from "./{ComponentName}.theme.component";

<aside> 📢 Be careful to remember to update the imports for the style files for both the source and theme components. [code example below]

</aside>

// {ComponentName}.source.component.js
import 'Source{Route}/{ComponentName}/{ComponentName}.style';

// {ComponentName}.theme.component.js
import '{ThemeRoute}/ProductPage/ProductPage.override.style';

<aside> ⛔ It’s not recommended to try and merge everything into one file because this will lead to making a lot of changes inside of component methods which runs the risk of accidentally breaking the component.

</aside>