Preoptimize your CSS theme and JavaScript

Abstract

Use preoptimization to style your themes.

SXA lets you build optimized files on front-end developer machines using the built-in theme tooling. This lets you generate pre-optimized-min files outside of the Sitecore instance, giving you more control over your assets.

You can do all optimization during front-end development. This way of working allows you to store your theme files in a repository, such as Git, to enable version tracking. It makes it easier to merge theme files because they are not stored as serialized items and their content is not encoded. It also allows different developers to work on the same theme at the same time.

Note

By default, the configuration encourages you to use preoptimization and does not upload your source CSS or JS. To change the default setting, go to the config.js file:<Theme>/gulp/config.js.

To use pre-optimized-min files for uploading styles and scripts:

  1. Create a new theme using SXA CLI. All script and style assets are automatically downloaded to your local theme folder.

  2. Use npm install and run the gulp watcher task .

  3. When you now change a style or script, the pre-optimized-min file is created and uploaded to your Sitecore instance automatically.

    For example, if you change a style for the Accordion component and save it, the message shows you that the source is not uploaded separately but by using the pre-optimized-min file.

    Uploading of pre-optimized-min was successful message.

    In the Content Editor, your theme's styles and scripts folders only contain the pre-optimized-min file and not the source assets.

    The theme folder contains the pre-optimized-min folder only.