Reduce size of provided CSS/JS files

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?

Add comment

Michal Szymanski staff pro premium priority answered 6 years ago

1 0 Best answer

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/

Add comment

Ungr pro answered 6 years ago

1 0 Best answer

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 pro premium commented 6 years ago

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

Add comment

ruudboon pro answered 6 years ago

0 0 Best answer

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 premium 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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: 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

Ungr

Pro User

198Support score
17Questions 11Answers

5Snippets likes 5Snippets