MDBootstrap 5 optimization

Introduction

This guide describes in detail the different ways to optimize project by reducing the amount of imported resources. You will learn how to use the individual modules provided as part of the MDB UI KIT, remove unused CSS or how to import only JS and SCSS code you need in your project.

If you need more extensive support and step-by-step guidance, check out our dedicated tutorial.

PurgeCSS

PurgeCSS is great tool which analyzes content of your HTML, JavaScript and CSS files and reduces CSS by deleting unused selectors.

In this guide we show how you can add PurgeCSS in new or existing project and how to build your app.

New project

If you are creating a new project, we recommend using one of our starters. You can use MDB CLI to create a new project:

Note: If you don't have MDB CLI installed yet, you can do it with NPM: npm install -g mdb-cli. Now log in with your MDB account, type: mdb login. If you don't have account yet you can create one using mdb register command.

        
            
              mdb frontend init mdb5-free-standard-webpack

        
            
              mdb frontend init mdb5-essential-standard-webpack

        
            
              mdb frontend init mdb5-advanced-standard-webpack

        
            
              mdb frontend init mdb5-free-standard-vite

        
            
              mdb frontend init mdb5-essential-standard-vite

        
            
              mdb frontend init mdb5-advanced-standard-vite

        
            
              mdb frontend init mdb5-free-standard-parcel

        
            
              mdb frontend init mdb5-essential-standard-parcel

        
            
              mdb frontend init mdb5-advanced-standard-parcel

You can also download the starter from the Webpack, Vite or Parcel repository.

After downloading the project, use the npm start command to run the starter.

Existing project

In this guide we show how we managed to add PurgeCSS in Webpack, Vite and Parcel starters with the help of PostCSS.

Step 1

The first thing we need to do is install @fullhuman/postcss-purgecss and postcss.

terminal

        
            
          npm i -D @fullhuman/postcss-purgecss postcss

Step 2

Then create postcss configuration file in the root directory of the project.

Terminal

        
            
          touch postcss.config.js

Step 3

Add PurgeCSS config. On this step we use two options: content to specify content that should be analyzed by PurgeCSS and css to specify css files that should be processed by PurgeCSS.

In addition, we add a condition that will add PurgeCSS only for production environment. Adding PurgeCSS when the development environment is running will slow down our dev server, so we will add a condition to avoid this.

JavaScript

        
            
          const purgecss = require('@fullhuman/postcss-purgecss')

          const purgecssConfig = purgecss({
            content: ['./**/*.html', './node_modules/mdb-ui-kit/js/mdb.min.js'],
            css: ['./node-modules/mdb-ui-kit/**/*.css'],
          })
          
          module.exports = ({ env }) => ({
            plugins: [
              env === 'production' ? purgecssConfig : false,
            ]
          })

Note: Parcel does not support this solution. Check out our postcss.config.js file for Parcel to see how we solved this problem.

That's all! Now PurgeCSS will analyze the files you provided in the content option and it will remove unused classes in your build.

Create build

The starter that we have prepared for you is fully configured and we have added the build command to it. Just run the npm run build command. You will find the bundled files in the dist folder.

If you have decided to configure the project yourself, you must add the build command in the package.json file. This command looks different for each bundler. Below you will find an example for Webpack, Vite and Parcel.

        
            
          "scripts": {
            ...
            "build": "webpack build --mode production",
            ...
          },

        
            
          "scripts": {
            ...
            "build": "vite build",
            ...
          },

        
            
          "scripts": {
            ...
            "build": "parcel build --public-url ./ ./src/index.html --dist-dir ./dist --no-cache",
            ...
          },

After that you can use npm run build command. You will find the bundled files in the folder you set as the output directory. By default, this is the dist folder.

Modules

MDB UI KIT PRO includes every component as a compiled module. Instead of importing the entire library, which translates into a reduction in efficiency, we can choose only the modules that are used in the project. Thanks to this, we significantly reduce the amount of KB downloaded by the application. It can be reduced even several times!

However, separated modules often use MDB styles such as spacing, position, or grid, so we recommend importing lightweight MDB UI KIT FREE as a core. It is contained in a package inside the free directory.

Here's a short instruction for installing a single module on the example of a Lightbox component:

Step 1

Download the package from orders

Step 2

Unzip downloaded package and open it in the code editor

Step 3

Replace mdb.min.css with the lightweight free version and import Lightbox css file. Not every module needs its own css files to work. All available and necessary style files for modules can be found in /css/modules/ dir.

index.html

        
            
        <!-- MDB -->
        <link rel="stylesheet" href="css/free/mdb.min.css" />
        <link rel="stylesheet" href="css/modules/lightbox.min.css" />

Step 4

Replace mdb.min.js with Lightbox js file.

index.html

        
            
        <!-- MDB -->
        <script type="text/javascript" src="js/modules/lightbox.min.js"></script>

Step 5

Add code of the basic example.

index.html

        
            
        <!-- Start your project here-->
        <div class="container my-5">
          <div class="lightbox">
            <div class="row">
              <div class="col-lg-4">
                <img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/1.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/1.webp" alt="Table Full of Spices" class="w-100" />
              </div>
              <div class="col-lg-4">
                <img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/2.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/2.webp" alt="Winter Landscape" class="w-100" />
              </div>
              <div class="col-lg-4">
                <img src="https://mdbcdn.b-cdn.net/img/Photos/Thumbnails/Slides/3.webp"
                  data-mdb-img="https://mdbcdn.b-cdn.net/img/Photos/Slides/3.webp" alt="View of the City in the Mountains" class="w-100" />
              </div>
            </div>
          </div>
        </div>
        <!-- End your project here-->

Step 6

You're ready to use Lightbox. Keep in mind that modules added individually will no longer be available under the global variable mdb. These variables will be named according to the file name. For example, for Lightbox it will be a lightbox. Here's an example of accessing a lightbox instance:

index.html

        
            
        <!-- Custom scripts -->
        <script type="text/javascript">
          const lightboxElement = document.getElementsByClassName('lightbox')[0];
          const instance = lightbox.getInstance(lightboxElement);
          instance.open(1);
        </script>

Note: Some modules may contain others, so it is not always required to add all js files separately. For example, Datatables already contains Select, so adding it again may cause errors in the application.

Custom MDB UI KIT version

When you create a project, the size of the js and css files affects the page loading speed. Below you will find some tips on how to reduce the size of MDB files by removing the code of components that you do not use.

The following steps require changes in the MDB UI KIT source code. Therefore we recommend use MDB CLI to get MDB UI KIT or downloading zip package instead of installing MDB UI KIT via npm.

Note: To create your own version of the MDB UI KIT you need to use the bundler. If you don't already use any bundler in your project, you can use MDB Webpack, MDB Vite or MDB Parcel starter. MDB starters are fully configured and ready to use with the MDB UI KIT.

Lean Sass imports

When using Sass in your asset pipeline, make sure you optimize MDB by only @importing the components you need. Your largest optimizations will likely come from the Layout & Components section of our \src\scss\mdb.free.scss and \src\scss\mdb.pro.scss.

Note: Check out the PurgeCSS section to see how you can easily automate the removal of unused CSS code.

mdb.free.scss
mdb.pro.scss

        
            
          // CORE FUNCTIONS
          @import './bootstrap-rtl-fix/functions';
          @import './free/functions';
          
          // CORE VARIABLES
          @import './custom/variables';
          @import './free/variables';
          @import './bootstrap-rtl-fix/variables';
          @import './bootstrap-rtl-fix/maps';
          
          // BOOTSTRAP CORE
          @import './bootstrap-rtl-fix/mixins';
          @import './bootstrap-rtl-fix/utilities';
          
          // BOOTSTRAP CORE COMPONENTS
          @import './bootstrap-rtl-fix/root';
          @import './bootstrap-rtl-fix/reboot';
          @import './bootstrap-rtl-fix/type';
          @import './bootstrap-rtl-fix/images';
          @import './bootstrap-rtl-fix/containers';
          @import './bootstrap-rtl-fix/grid';
          
          // BOOTSTRAP COMPONENTS
          @import './bootstrap-rtl-fix/tables';
          @import './bootstrap-rtl-fix/forms';
          @import './bootstrap-rtl-fix/buttons';
          @import './bootstrap-rtl-fix/transitions';
          @import './bootstrap-rtl-fix/dropdown';
          @import './bootstrap-rtl-fix/button-group';
          @import './bootstrap-rtl-fix/nav';
          @import './bootstrap-rtl-fix/navbar';
          @import './bootstrap-rtl-fix/card';
          @import './bootstrap-rtl-fix/breadcrumb';
          @import './bootstrap-rtl-fix/pagination';
          @import './bootstrap-rtl-fix/badge';
          @import './bootstrap-rtl-fix/alert';
          @import './bootstrap-rtl-fix/accordion';
          @import './bootstrap-rtl-fix/progress';
          @import './bootstrap-rtl-fix/placeholders';
          @import './bootstrap-rtl-fix/list-group';
          @import './bootstrap-rtl-fix/close';
          @import './bootstrap-rtl-fix/toasts';
          @import './bootstrap-rtl-fix/modal';
          @import './bootstrap-rtl-fix/popover';
          @import './bootstrap-rtl-fix/carousel';
          @import './bootstrap-rtl-fix/spinners';
          @import './bootstrap-rtl-fix/offcanvas';
          @import './bootstrap-rtl-fix/tooltip';
          
          // Helpers
          @import './bootstrap-rtl-fix/helpers';
          
          // Utilities
          @import './free/utilities';
          @import './bootstrap-rtl-fix/utilities/api';
          
          // MDB CORE
          @import './free/mixins';
          @import './free/utilities';
          
          // MDB CORE COMPONENTS
          @import './free/root';
          @import './free/reboot';
          @import './free/type';
          @import './free/colors';
          @import './free/shadows';
          @import './free/flag';
          @import './free/images';
          
          // MDB FORMS
          @import './free/forms/form-control';
          @import './free/forms/form-select';
          @import './free/forms/form-check';
          @import './free/forms/form-file';
          @import './free/forms/input-group';
          @import './free/forms/validation';
          @import './free/forms/form-range';
          
          // MDB COMPONENTS
          @import './free/tables';
          @import './free/buttons';
          @import './free/deprecated';
          @import './free/dropdown';
          @import './free/button-group';
          @import './free/nav';
          @import './free/navbar';
          @import './free/card';
          @import './free/breadcrumb';
          @import './free/pagination';
          @import './free/badge';
          @import './free/alert';
          @import './free/progress';
          @import './free/list-group';
          @import './free/close';
          @import './free/modal';
          @import './free/toasts';
          @import './free/tooltip';
          @import './free/popover';
          @import './free/scrollspy';
          @import './free/ripple';
          @import './free/range';
          @import './free/accordion';
          @import './free/carousel';

        
            
          // MDB FREE
          @import './mdb.free.scss';
          
          // MDB PRO
          @import './pro/variables';
          @import './pro/modal';
          @import './pro/perfect-scrollbar';
          @import './pro/sidenav';
          @import './pro/animate';
          @import './pro/lightbox';
          @import './pro/rating';
          @import './pro/timepicker';
          @import './pro/navbar';
          @import './pro/datepicker';
          @import './pro/popconfirm';
          @import './pro/datatable';
          @import './pro/steps';
          @import './pro/stepper';
          @import './pro/timeline';
          @import './pro/sticky';
          @import './pro/select';
          @import './pro/loading';
          @import './pro/autocomplete';
          @import './pro/theme/theming';
          @import './pro/chips';
          @import './pro/multi-range';
          @import './pro/date-time-picker';

If you’re not using a component, comment it out or delete it entirely. For example, if you’re not using the carousel, remove that import to save some file size in your compiled CSS. Keep in mind there are some dependencies across Sass imports that may make it more difficult to omit a file.

Lean JavaScript

MDB JavaScript includes every component in our primary dist files (mdb.min.js). While you’re customizing via Sass, be sure to remove related JavaScript. For instance, assuming you’re using your own JavaScript bundler like Webpack, Parcel, or Vite, you’d only import the JavaScript you plan on using. In the example below, we show how to just include our modal JavaScript:

JavaScript

        
            
        // BOOTSTRAP CORE COMPONENTS
        // import Button from './free/button';
        // import Collapse from './bootstrap/mdb-prefix/collapse';
        // import Offcanvas from './bootstrap/mdb-prefix/offcanvas';
        // import Alert from './free/alert';
        // import Carousel from './free/carousel';
        import Modal from './free/modal';
        // import Popover from './free/popover';
        // import ScrollSpy from './free/scrollspy';
        // import Tab from './free/tab';
        // import Tooltip from './free/tooltip';
        // import Toast from './free/toast';
        
        // MDB FREE COMPONENTS
        // import Input from './free/input';
        // import Dropdown from './free/dropdown';
        // import Ripple from './free/ripple';
        // import Range from './free/range';

This way, you’re not including any JavaScript you don’t intend to use for components like buttons, carousels, and tooltips.

Note: Files in mdb-ui-kit/src/js use the default export, so if you want to use one of them you have to do the following:

            
              import Modal from 'mdb-ui-kit/src/js/pro/modal';
              const modal = new Modal(document.getElementById('myModal'))

Create build

After making changes, you need to create a build. This will allow you to get new, smaller js and css files containing only the components you need.

The starter that we have prepared for you is fully configured and we have added the build command to it. Just run the npm run build command. You will find the bundled files in the dist folder.

        
            
            "scripts": {
              ...
              "build": "webpack build --mode production",
              ...
            },

        
            
            "scripts": {
              ...
              "build": "vite build",
              ...
            },

        
            
            "scripts": {
              ...
              "build": "parcel build --public-url ./ ./src/index.html --dist-dir ./dist --no-cache",
              ...
            },

After that you can use npm run build command. You will find the bundled files in the folder you set as the output directory. By default, this is the dist folder.