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.umd.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. If you add new files to your project make sure to include them in the content option for JS and HTML files and in the css option for CSS files. This will ensure that PurgeCSS doesn't strip out the classes you actually use.

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.

JS optimization

MDB UI Kit provides a ES format that allows, instead of importing the entire library, to 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!

For Example: In a new vite application, importing and using only Input component, the build weights close to 70 kB. Using the same code but importing the entire library, the build weights a little bit over 630 kB.

The only thing you have to remember is to always init the component using initMDB method provided in MDB UI Kit library otherwise the components will not work properly.

How to use the ES format of the MDB UI Kit?

Here's a short instruction for importing a single module on the example of a Input component:

Step 1

Create a new project with MDB UI Kit. You can use MDB Vite starter. MDB starters are fully configured and ready to use with the MDB UI KIT.

Step 2

Install dependencies

terminal

        
            
          npm install

Step 3

Add code of the basic example.

index.html

        
            
          <div class="form-outline" data-mdb-input-init>
            <input type="text" id="form12" class="form-control" />
            <label class="form-label" for="form12">Example label</label>
          </div>

Step 4

Import Input from modules instead of importing only mdb-ui-kit.

Note: The Input component will not work without the initMDB method unless you are using the UMD format.

src/js/main.js

        
            
          import { Input, initMDB } from "mdb-ui-kit";
          initMDB({ Input }, true); // set second parameter to true if you want to use a debugger

Step 5

Run the application.

terminal

        
            
          npm start

Step 6 *optional

Run the build and compare the created JS weight. You can play around with other components and compare the builds.

terminal

        
            
          npm run build

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.umd.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.