How to Reduce CSS/JS Bundle Size By Removing Unused Resources Using Gulp
Hi,Metronic's by default includes all its available resources within the gulp config so the bundle size of the compiled CSS/JS files. To reduce the file size of the CSS/JS bundle files follow the below steps:
- Open
theme/tools/gulp.config.jsand refer tobase->global->srcconfig node. Themandatorycontains of the core resource that are required for the Metronic's base functionalty while theoptionalnode lists the optional resource that can be excluded according to a project requirements. - Under
optionalnode remove any resource by referring to a plugins documentation - Recompile the assets using the Gulp builder
Replies (8)
Hi,
bundle.css & bundle.js files remain the same size even if i deleted optional nodes.
Shouldn't these files be reduced in size?
https://prnt.sc/-QMb4VcRxMB3
I got same concern that files are really big, especially those two. I think downloading over 2MB or even 3MB it's not very optimal, so i decided to do sth with it.
I spend some time looking for some optimizations and finally found purgecss.
It's not like just plug and play and you need to experiment a little bit what should be removed and what should be kept, knowing that Metronic is really JS oriented and lots of things are happening with some clicks etc, so it also impacts CSS.
At the end I managed to reduce file size to around 200KB (yes, I don't use all that stuff in Metronic, but page is still nice, responsive and looks pretty).
It is not reducing the size.
FYI, in v8.2.2, optional is located under:
build->plugins->global->src->optional
What about the ones located in buld->plugins->custom like draggable, prismjs, datatables, leaflet, etc? Can they be removed too?
Hi,
Yes, you can exclude it from your build if you don't use them. Or at least just do not include in your HTML the assets of those plugins.
Regards.
In angular how can I reduce that CSS/JS Bundle?
Hi,
For Angular, you can configure the used in src/assets/sass/core/vendors/plugins/_plugins.scss.
Regards.
