Optimizing for production
Learn how to optimize your final bundle to get the best performance out of your build

Overview

Performance is critical, and since Nile Dashboard is using frontal.js as its build tool, that out-of-the-box gives us many advantages regarding optimization, for example:

  • HTML source code is minified by default (can be disabled from frontal.config.js)
  • CSS assets are minified
  • Javascript assets are minified
  • Images are optimized
  • SVGs are optimized

In order to achieve the best performance for your bundle, you will need to be careful with picking which components and javascript assets are loaded for which pages, as discussed in the Customize your Bundle guide.

The purchased package also includes several showcases, make sure to take a look at each showcase's frontal.config.js file to see how bundles are split to achieve the best result.

Since Nile Dashboard comes with lots of utility classes as well as light and dark modes, that can make your final CSS assets larger than expected, but this can easily be handled via two strategies, in this article we will discuss each strategy and how to achieve them.

PurgeCSS (Recommended)

frontal.js provides support for PurgeCSS, for those of you who don't know purgeCSS, in a nut shell, it crawls the contents of your HTML pages, and keeps a list of all the used CSS classes and purges all other unused CSS classes, that makes your final CSS bundle as optimized as it can ever be.

But it comes with downsides, it won't understand classes added from javascript files, that means, bootstrap's popover component for example, is a javascript component, and some classes are added to the HTML via javascript, and therefore purgeCSS won't be able to detect them and will purge them, leaving your final website broken by having missing classes.

In order to handle this situation, PurgeCSS provides a feature called whitelist, this is basically a configuration option, that is an array of CSS Selectors or regular expressions, that purgeCSS will always make sure NOT to purge when processing your final CSS assets.

If you have taken a look at the showcases available within your purchased package, you will see that all of them uses PurgeCSS, as each also configures frontal.js to tell PurgeCSS to whitelist certain classes, you can always use these configurations for your own use to whitelist the most commonly used CSS classes of bootstrap's javascript components.

Lets look at an example on how to configure PurgeCSS using frontal.config.js:

// frontal.config.js
module.exports = {
  ...
  build: {
    purgecss: {
      enabled: true,
      whitelist: [
        // whitelist Nile classes
        /^sn-/,
        /^theme-switch-/,
        'sidenav',
        'enter-active',
        'leave-active',
        'sn-page-overlay',
        'is-active',

        // whitelist bootstrap classes
        /^modal-/,
        /^popover-/,
        /^carousel-/,
        /^dropdown-/,
        'data-bs-popper',
        'carousel',
        'active',
        'slide',
        'show',
        'hide',
        'fade',
        'popover',
        'collapsed',
        'collapsing',
        'collapse',
        'dropdown',
        'disabled',
        'show',
        'dropup',
        'dropend',
        'dropstart',
      ]
    }
  },
  ...
}

The whitelist array provided in the previous code example, should always be used because these are the most commonly used classes in pretty much all dashboard use cases.

You can further whitelist components for example

// frontal.config.js
module.exports = {
  ...
  build: {
    purgecss: {
      enabled: true,
      whitelist: [
        ...

        // whitelist quill editor
        'ql',
        /^ql-/,

        // whitelist fullcalendar
        'fc',
        /^fc-/,

        // whitelist filepond
        'filepond',
        /^filepond--/,
        'data-filepond-item-state',
        'data-style-panel-layout',
        'data-disabled',
        'data-scalable',
        'data-state',
        'data-drag-state',
        'data-hopper-state',
        'data-align',
      ]
    }
  },
  ...
}

If you do not desire to use this strategy for optimization, make sure to disable it, because frontal.js enables it by default, as follows

// frontal.config.js
module.exports = {
  ...
  build: {
    purgecss: {
      enabled: false
    }
  },
  ...
}

Configuring Utilities

The other strategy you can use to optimize your CSS bundle further, is by configuring which utilities should be generated, for example, you can opt out of all utilities by configuring Nile Dashboard library options from frontal.config.js as follows:

// frontal.config.js
module.exports = {
  ...
  library: {
    options: {
      utilities: false
    }
  },
  ...
}

Or you can customize which Utility classes Nile Dashboard should generate by customizing @library/extend/_utilities.scss as follows:

// @library/extend/_utilities.scss
@forward "@library/sass/config/utilities" with (
    $dx-init-theme-variants-colors:           true,
    $dx-init-theme-primary-levels-colors:     false,
    $dx-init-theme-colors:                    false,
    $dx-init-theme-colors-states:             false,
    $dx-init-theme-colors-gradient:           false
);

Always make sure to get reference of the available variables from the forwarded file @library/sass/config/_utilities.scss

You don't have to worry about optimizing bootstrap, because the nature of Nile Dashboard is enabling only the needed components as you go, so we already have that covered.

Critical Components

Some components are needed to be loaded before other components, so that they are loaded as fast as possible, for example, the Theme Switch component, it requires to be loaded as early as possible so that it handles activating the default theme, the way Nile Dashboard recommends handling this, is by splitting critical components within their own bundle, as seen in the all showcases:

// frontal.config.js
module.exports = {
  ...
  bundles: {
    theme: {
      pages: ['**/*.html'],
      components: {
        themeSwitch: true,
      }
    },
    // ... other bundles
  }
  ...
}

Also note that the themeSwitch handles removing the class="invisible" from the body tag, if that's the case, make sure to hide the body by default as the Theme Switch component will, remove that class upon load.

If you are facing problems optimizing your final package, don't hesitate to contact us as we will be pleased to help out!

{title}