[WIP] RS-838 configured CSS chunks

[rostyk-kanafotskyy]

Description:

So here is an example of how chunks can be split up

So for every js file, we have CSS chunk.
It works well for separate pages as b2b.home.page
But in other cases it sill causing performance issues in Litehouse:

Before:

After:

As we can see the loading time increased from 0.15s to 0.45s

In the case of unused CSS, we already have https://cssnano.co/ as a part of ‘OptimizeCSSAssetsPlugin’. So all unused CSS gets removed while building.

Linting:

• No linting errors

Tests:

• E2E tests (npm test run with e2e)
• Manual tests
• Accessibility tests (no new react-axe errors in console)

Documentation:

• Requires documentation updates
• Requires Storybook component updates

[shaunmaharaj]

Thank you for capturing this @rostyk-kanafotskyy and trying this out. That's unfortunate that it will increase our load times.
Given the time spent, if our performance is negatively impacted by this, I suggest we capture findings of this attempt within the ticket and we close this as "not fixing".

[aChanEP]

Thank you for capturing this @rostyk-kanafotskyy and trying this out. That's unfortunate that it will increase our load times.
Given the time spent, if our performance is negatively impacted by this, I suggest we capture findings of this attempt within the ticket and we close this as "not fixing".

Agree with this. Splitting out the CSS is a valid spike here and we may use it down the line. I guess our app hasn't hit a sizeable amount of CSS yet to warrant chunking for every single css to each bundle. These numbers are odd though... how did splitting out the css to each bundle cause overrall size to grow by 30kb?