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 or how to generate your own version of the UI KIT in a Webpack based tool.

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.

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

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

Step 5

Add code of the basic example.

        <!-- Start your project here-->
        <div class="container my-5">
          <div class="lightbox">
            <div class="row">
              <div class="col-lg-4">
                <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/1.webp"
                  data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/1.webp" alt="Lightbox image 1" class="w-100" />
              </div>
              <div class="col-lg-4">
                <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/2.webp"
                  data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/2.webp" alt="Lightbox image 2" class="w-100" />
              </div>
              <div class="col-lg-4">
                <img src="https://mdbootstrap.com/img/Photos/Thumbnails/Slides/3.webp"
                  data-mdb-img="https://mdbootstrap.com/img/Photos/Slides/3.webp" alt="Lightbox image 3" 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:

        <!-- 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 version of MDB UI KIT

It is possible to prepare a custom version of MDB UI KIT. It can be useful when the project uses only several modules of our library and you want to reduce the size of the compiled files. To achieve this, follow the steps:

          npm install
        

          npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-essential
        

          npm install git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/standard/mdb-ui-kit-pro-advanced
        

Getting MDB UI KIT source code

        npm run getMDBsrc
      

Importing JS components

Copy the content from mdb/js/mdb.free.js or mdb/js/mdb.pro.js to src/js/index.js file. Pick only the components you need and update path to the mdb dir. Here's an example:

        import Carousel from '../../mdb/js/free/carousel';
        
        export { Carousel };
      

Some components may require additional dependencies to be installed. Webpack should report this after starting a devServer.

Importing SCSS files

Same as with js files, copy the content from mdb/scss/mdb.free.scss or mdb/scss/mdb.pro.scss to src/scss/index.scss. Remove the lines with the import of modules that you will not use and update the paths to point the mdb dir.

Keep in mind that many scss files are related to each other. For example, a modal will need files for buttons, ripple, modal, close and transtions to work properly. We recommend that you only delete the files described by comments BOOTSTRAP COMPONENTS and MDB COMPONENTS.

Example path for a carousel file:

        (...)
        @import '../../mdb/scss/free/carousel';
      

Configuration

Webpack config for MDB development is located in /webpack/mdb/ directory and index.html file is placed in /src/mdb/ directory.

Dev Server

        npm run startMDB
      

Build

        npm run buildMDB