1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: Reduce size of provided CSS/JS files

Ungr pro asked 6 years ago

Related to https://mdbootstrap.com/support/angular/over-700kb-of-js-and-800kb-of-css/ Hello guys. Is there any progress in reducing the size of provided files of the bundle? I almost fell of the chair when I downloaded the PRO version and saw 6MB of CSS. After minification its still 700kB of CSS + 600kB of JS - that makes 80% of my website size!.. I cant imagine a mobile user using 3G connection downloading 1 minute my ~2MB page... As mentioned before - this makes the bundle completely unusable. More though looking at relative CSS frameworks that have about 1/10 the size.. What are the possible solutions and is anybody solving it ATM?

ruudboon pro answered 6 years ago

Is gulp the only way to do this, or is there a way to just import the required components in your project? For in example vue (webpack) I could imaging we only add the components you import.

Jakub Mandra staff commented 6 years ago

Ofcourse webpack can help here too, but is more complicated and it has a little different approach (its not task runner, but module bundler). More read: https://da-14.com/blog/gulp-vs-grunt-vs-webpack-comparison-build-tools-task-runners

Ungr pro answered 6 years ago

Thank for your response. Ive currently done so with SCSS files and saved about 200kB but im not sure with JS dependencies. There are some libs in compiled build - for example ChartJS that can save a lot. Is there any way to disable these without breaking compilation?

Bartłomiej Malanowski staff commented 6 years ago

Did you check our Gulp tutorial? You can simply remove Chart.js and rebuild mdb.js ;)

Michal Szymanski staff answered 6 years ago

We are in the process of testing MDB Lite - which will be the super-light version of MDB. It's a matter of 4-8 weeks. But remember, please - right know you can compile your own, light package with our scss files and javascript modules. Hava a look at our tutorial: https://mdbootstrap.com/bootstrap-gulp-tutorial/
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: PC
  • Browser: Chrome 49
  • OS: Win 10
  • Provided sample code: No
  • Provided link: No
Tags
performance css js
About author
Ungr
Pro User 198Support score
17Questions 11Answers 5Snippets