Handle CSS and JavaScript files in Sitecore Headless Implementation

Question

I am looking for inputs to manage Static Resources (CSS and JS files) in headless implementation.

• Are you having single CSS and JS files for your Website and Components?

• Using one CSS and JS file for website for required framework and
  themes, and separate CSS and JS file for individual components?

• If separate CSS and JS files then how are you clubbing them into
  Single CSS and JS file?

• How will you bundle individual components files added on page to avoid loading all components CSS and JavaScript files even they are not used?

• By default include only base framework of Static Resources (CSS and JavaScript) and page specific components Static Resources (CSS and JavaScript) to avoid unnecessary static resources which are not being used so that we can improve page response

Application Details:

• Sitecore Version: 10.1.1

• Implementation: Headless

• Client Side Framework: ReactJS

• Deployment: Containers

Please share your thought process and suggestion to achieve above requirements.

Answer 1

I raised this question on the Sitecore Slack and received following responses and adding it here so that everyone have access to shared suggestions:

From Jean-François (Jeff) L'Heureux:

I let webpack bundle all the files. So I think what you want is "code splitting" or "bundle splitting" per page/component. There are plenty of articles on the web explaining how to do it with various front-end frameworks and bundlers.

From Steve McGill:

Yes. We've been wondering this too. The issue is that we want allow editors to put components on any page, one of Sitecore's selling points. But we also want to heavily optimize the bundles to get good Lighthouse scores. I'm not sure we can do both. So especially on the homepage, adding components might need to be locked down. +1 for webpack

Answer 2

Importing Dynamically using webpacks

The dynamic import statement can be used within the code ,to tell Webpack to build a bundle for the desired import.

Since the BeMyFriend component only appears when a user clicks a button,we can delay loading the package until the user performs that operation.

export default function MainComponent {
const [isBeMyFriendDisplayed, setBeMyFriendDisplayed] = useState(false);
const [BeMyFriendComponent, setBeMyFriendComponent] = useState(null);

const loadBeMyFriendComponent = async () => {
 const loadResult = await import('./components/BeMyFriend.js');
 setBeMyFriendComponent(() => loadResult.default);
};

return (
 <div>
   {isBeMyFriendDisplayed && BeMyFriendComponent ? <BeMyFriendComponent /> : null}
   <button onClick={() => {
     setBeMyFriendDisplayed(true);
     loadBeMyFriendComponent();
   }} />
 </div>
);
}