Topic: I'm trying to reduce the size of the mdb.umd.min.js file, but I'm having trouble.
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.
the screen layout is all broken.
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.
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- 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
LeeHoLim pro premium 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.