Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: I'm trying to reduce the size of the mdb.umd.min.js file, but I'm having trouble.

LeeHoLim priority asked 2 weeks ago


My goal is to reduce the size of the mdb.umd.min.js file and the min.min.css file.

https://mdbootstrap.com/docs/standard/getting-started/optimization/

This page has instructions, but they don't go into much detail.It's more like “this is roughly what you should do”.

I have node.js installed on my macbook.In the terminal, I did the following.

$ npm install -g mdb-cli

$ mdb login

$ mdb frontend init mdb5-advanced-standard-vite

$ cd mdb5-advanced-standard-vite

I opened the package.json file in an editor and changed the "ACCESS_TOKEN" to mine.

$ npm install

$ npm run build

dist/assets/main.js (426k), dist/assets/style.css (183k)

When I load the above 2 files on my website, I have the following problem.

  1. the screen layout is all broken.

  2. you can't use Pro modules like Select.

I just build them without doing anything.

My goal is to remove the chart, chips, lightbox, stepper, popconfirm, rating modules to reduce the js and css files.

I'm working with the UMD way, not the ES way.

I've been working on it for 3 days, 6 hours a day, doing whatever it takes, but it's not working.

Is there something I'm missing?Please help me out.


LeeHoLim priority commented 2 weeks ago

Is there a detailed guide page to make things easier for beginners? I wish there was an online builder.

It would be nice to be able to just select the modules you want to use and don't want to use with a click of the mouse on a web page and it would automatically create and download the mdb.umd.min.js file and css file.

Including all modules makes webfates slow to load due to the large size of the files, and it also hurts SEO in Google search engines.


Kamila Pieńkowska staff answered 2 weeks ago


We do not provide a builder; we give an option to use ES modules that import only the needed modules in the final build. To reduce the size of the final build you should use mdb.es.min.js. For pro components to work, you must init them via the initMDB method.

You can check how to import MDB and initiate components https://mdbootstrap.com/docs/standard/pro/installation/#section-npm In the example only Input is initiated - you need to add all components that you use on your page.

To get leaner CSS you need to purge unused CSS - instruction here: https://mdbootstrap.com/docs/standard/getting-started/optimization/#section-purgecss

If you want to work with UMD you cannot import minified files - you need to import source files, comment out components you don't need and build minified files yourself.

Instruction is in the ZIP/MDB CLI tab of linked section. https://mdbootstrap.com/docs/standard/getting-started/vite-integration/#section-import-mdb



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 8.1.0
  • Device: Macbook
  • Browser: Chrome 131.0.6778.108
  • OS: MAC 15.1.1
  • Provided sample code: No
  • Provided link: Yes