Optimization

As you have probably noticed, Bootstrap and MDBootstrap are very powerful tools, with many features and components. This is, of course, their great advantage, but it rarely happens that you need all these wonderful things at once, in one project.

That is why optimization, i.e. reducing the weight of the package, is so important. This will make your code lighter and faster.

In this lesson, I'll show you how you can reduce the weight of an MDBootstrap package by up to 90% by automatically removing unused CSS classes and JavaScript code.

The PurgeCSS tool will help us in this important optimization task.

PurgeCSS

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

Normally, setting up and using PurgeCSS is quite complicated and cumbersome. However, with our Vite starter, it's child's play.

The Vite MDB launcher contains a ready-to-use configuration for PurgeCSS, so all we have to do is run the appropriate command in the terminal, and the rest of the magic will happen behind the scenes.

Create build

In order to generate a lightweight package, we need to create the so-called "build". They are simply compiled, minified and optimized files that any browser will be able to handle.

Unlike the source files we work on, the build contains unreadable for a human code, because at this stage it is supposed to be readable only by machines.

To create a build, run the following command in the terminal (make sure your terminal is set to the path where your Vite launcher project is located):

        
            
  
      npm run build
  
      
        
    

After a few seconds, you will see information about what files were generated and where, and how much they weigh.

As you can see, they are in the /dist/ folder and in my case they weigh:

• index.css: 29.17 KiB (compared to 260 KiB of normal MDB CSS file)
• index.js: 152.38 KiB (compared to 707 KiB of normal MDB JS file)

That's a huge improvement, don't you think?

But you can do even more. If you are interested in additional optimization methods, please visit our optimization documentation page.

And as always - if you have any questions or if something doesn't work as it should - don't hesitate to hit me up on twitter 😉