Styled-components-website: Lazyload live editor

[mxstbr]

The styled-components.com website has a main JS bundle of ~818kB min+gzip, which is way too much. See this WebPageTest: https://www.webpagetest.org/result/191116_RY_98247762e3a552fd20d4c98a97ed8604/

While our first paint is okay-ish thanks to SSR, the website takes forever to become interactive. I am guessing most of the weight is from the live editor, so a good first step would be to lazy load that.

[Avi98]

Hi @mxstbr, i can start working on it

[mxstbr]

Yes please!

[JakobSpahn]

Hello @mxstbr, is this still open?

[el1f]

Fairly sure it still is :)

[kapilgorve]

@mxstbr I was able to dynamically load the LiveEdit from components/LiveEdit. Reduced the index bundle size from 900KB to 642KB . However there is some issue with styling. LiveEdit component has some styling defined which is different from the index page.

What is the course of action here ? Create another component , that will lead to duplication of LiveEdit . Or the horizontal layout is okay ?

[kapilgorve]

https://github.com/styled-components/styled-components-website/pull/623

[kwaimind]

Hey @kapilgorve what's the status of this PR and issue? Looks like you've made a draft PR but wondered if it was ready for a code review?

[kapilgorve]

@kwaimind Yeah I think it's good for reviewing. Just not sure about styling change.