Book Image

Mastering Adobe Commerce Frontend

By : Jakub Winkler
Book Image

Mastering Adobe Commerce Frontend

By: Jakub Winkler

Overview of this book

Navigating the frontend realm of the Adobe Commerce platform can often feel like a labyrinth, given its multifaceted systems and intricate layering. This book demystifies Adobe Commerce frontend development, guiding you through its paths with clarity and precision. You'll learn how to set up your local environment, paving the way for a smooth development experience and navigate the platform's theming ecosystem, exploring layout XML systems and the power of templates. As you progress through the book, you'll leverage an array of JavaScript libraries and frameworks that Adobe Commerce boasts of, with special emphasis on RequireJS, jQuery, Knockout.JS, and UI Components. Additionally, you'll gain an understanding of the intricacies of Adobe Commerce CMS, explore frontend-related configurations in the admin panel, and unlock the secrets of frontend optimization. Practical exercises provided in the book will enable you to create top-notch Adobe Commerce sites that are functional, optimized, user-centric, and a step ahead in the ever-evolving frontend landscape.
Table of Contents (18 chapters)

The minification, merging, and bundling of CSS, JS, and HTML

In the first section of this chapter, I’ve already explained why minification and bundling are key factors in frontend optimization. AC has a lot to offer for CSS and JS in that area. In developer mode, it is possible to enable or disable the following:

  • Minification
  • Merging
  • Bundling (also called merging)

This section is only visible, as mentioned, in developer mode and can be found under STORES | Configuration | ADVANCED | Developer:

Figure 14.6 – Developer configuration in the admin panel

Figure 14.6 – Developer configuration in the admin panel

We’ve already worked with this section when we enabled path hints; this is where it can be disabled or enabled for certain IPs.

Let me tell you what each section does and how it reflects code and changes on the frontend.

CSS merging and minification

The options for CSS are quite simple:

Figure 14.7 – CSS developer settings

Figure 14.7 – CSS developer settings...