Can we remove shared CSS from bundles?

Developer Support
1

34k of shared CSS – can we reliably strip it out?

In our current setup, we server-side render multiple pages (1 for main landing-page, 2 for nav, 1 for footer), and then combine them to generate our final page. When server side rendered, it looks like each of these pages have 34k of CSS that is identical. Can we safely strip this from each asset and include once on the page?
• Is there a way for us to explicitly identify in the server-side rendered HTML for a page what parts are common/shared?
I believe the shared parts depend on the current project, as they contain font info, etc., but is it safe to assume that if all pages come from the same project, a certain part of code is always shared between pages?

2

Hey @rear_vole, how are you fetching and combining the pages to generate the final page?

3

@tiago we are server-side rendering each page to generate HTML, and then injecting the HTML into the final page for each of them

The reason is as follows:
• Our site is on shopify, and most of the pages are still shopify pages… For shopify pages, the main content on the page comes from shopify, but we still want Nav / footer / etc. to come from plasmic. To do this, we pre-render nav / footer / etc. server side, then inject the final HTML into the shopify pages in the right place
• Some pages use plasmic for the site content, but to keep things clean / the-same, we also there inject nav / footer in the same way as above

4

Hmmm, I see! You can pass multiple arguments to maybeFetchComponentData and if you fetch multiple components at once it should not generate duplicate code/CSS. Something like:

function getStaticProps() {
  const plasmicData = await PLASMIC.maybeFetchComponentData("/header", "/nav", "/footer");
  ...
  return {
    props: {
      plasmicData,
      ...
    }
  };
}

export function Page(props) {
  const { plasmicData, queryCache } = props;
  ...
  return (
    <PlasmicRootProvider
      loader={PLASMIC}
      prefetchedData={plasmicData}
      prefetchedQueryData={queryCache}
    >
      <PlasmicComponent component={"/header"} />
      <PlasmicComponent component={"/nav"} />
      <PlasmicComponent component={"/footer"} />
    </PlasmicRootProvider>
  );
}

Would that work in your setup?

5

@tiago how would you change this if /header, /nav and /footer needed to be rendered to different react roots? (we are also pre-rendering via SSR separately…)

6

E.g. is there a way to pass in a parameter to PlasmicRootProvider to skip shared css? And a parameter to only render the shared css? :slightly_smiling_face:

7

aka shared components?

8

Hey @rear_vole, unfortunately I believe there’s no way to do that at the moment.

9

@tiago fair enough. But can I reliably expect that the top of rendered output should be the same for all pages in a project?