CODEWITHSUNDEEP
shopwareshopware6
Auhona
Auhona

Reputation: 211

How can I implement CSS code-splitting by page-type in Shopware 6?

I'm currently working on optimizing the CSS loading process for a Shopware 6 storefront. The default behavior seems to bundle all styles into a single all.css file, which is less than optimal in terms of performance. I'm particularly interested in code-splitting the styles based on page-type, such as having separate CSS files for product pages, checkout pages, and more.

Is there a recommended approach or inbuilt feature in Shopware 6 to achieve this kind of code-splitting for CSS, where different entrypoints like product.scss, checkout.scss, etc., can be utilized to load styles specific to particular page-types? If not, what would be the best way to implement this functionality to improve the initial page load time and optimize the user experience, ensuring that styles relevant to the current page are loaded efficiently?

Upvotes: 1

Views: 336

Answers (1)

mlodhi
mlodhi

Reputation: 732

Yes, it is feasible to extend the Webpack configuration to generate multiple compiled CSS files and eliminate the need for a single all.css. For instance, you can create distinct CSS files for different sections such as CMS, Category, PDP (Product Detail Page), Checkout, and a Common file (containing styles used universally). To achieve this, you would include the relevant .scss files and import the necessary components for each section. Subsequently, in the base Twig file, you can remove the reference to all.css and include the appropriate new CSS files based on the current route.

Upvotes: 1

Related Questions