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 (11)
Workforce management software streamlines scheduling, attendance, and productivity for businesses. Workforce management solutions enhance efficiency in various sectors, ensuring optimal resource allocation. Contact center workforce management and call center workforce management software specifically cater to the unique demands of customer service environments, optimizing agent performance and customer satisfaction.
To reduce the size of Metronic's compiled CSS/JS files, open `theme/tools/gulp.config.js`, and in the `base->global->src` configuration, remove unnecessary resources under the `optional` node (based on project requirements). Then, run the `gulp` command to recompile the assets, generating smaller files.Block Blast
Hi Sean, thanks for this guide! Can I apply these steps to optimize the CSS/JS bundle size for my photo editing website? Are there any specific tips for such platforms?
here is my website: meituapksite.com
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.
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.
FYI, in v8.2.2, optional is located under:
build->plugins->global->src->optional
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.
