Author Topic: Minify and combine CSS and JS in production  (Read 1172 times)

Huubs

  • Jr. Member
  • **
  • Posts: 303
Minify and combine CSS and JS in production
« on: August 11, 2021, 12:46:38 pm »
Hello,

I have an annoying problem, which is that all the files in the Virtuemart installation are not minimized and not combined. I think we can gain a lot of extra performance if we combine and minimize these files. Also, something to consider is to specify in the backend whether or not you want to load specific files. For example I don't use Facebox, but that still gets loaded regardless. Any dev want to comment on this?

AH

  • Global Moderator
  • Sr. Member
  • *
  • Posts: 3487
  • VirtueMart Version: 3.8.9
Re: Minify and combine CSS and JS in production
« Reply #1 on: August 11, 2021, 16:18:17 pm »
Nice idea which we enabled some time ago for CSS - you can combine FE css yourself - There is a hidden config in virtuemart.cfg
VMcombinedCssFE=1

This overrides the core css
-common
and
-site

and attempts to load - vm-ltr-combined-min.css

ltr - language direction can differ based on your config.


This code exists in vmjaspi.php
Code: [Select]
$combined = VmConfig::get( 'VMcombinedCssFE', 0 );
if($combined) {
$cssFile = 'vm-'.$direction.'-combined-min';
vmJsApi::css( $cssFile );
} else {
$cssFile = 'vm-' . $direction .'-common';
vmJsApi::css ( $cssFile ) ;

$cssFile = 'vm-' . $direction .'-site';
vmJsApi::css ( $cssFile ) ;

if(VmConfig::get( 'showReviewFor', 'none' ) != 'none' and VmConfig::get( 'showRatingFor', 'none' ) !='none') {
$cssFile = 'vm-'.$direction.'-reviews';
vmJsApi::css( $cssFile );
}
}

We also stopped any review css loading if the admin config was set to not show them.
Regards
A

Joomla 3.9.27
php 7.4

Huubs

  • Jr. Member
  • **
  • Posts: 303
Re: Minify and combine CSS and JS in production
« Reply #2 on: August 14, 2021, 13:59:39 pm »
Ok that is great. Do I just add it into the .cfg file and it works automatically?

Also a possibility to combine and mnify the javascript files?

AH

  • Global Moderator
  • Sr. Member
  • *
  • Posts: 3487
  • VirtueMart Version: 3.8.9
Re: Minify and combine CSS and JS in production
« Reply #3 on: August 14, 2021, 14:31:16 pm »
You have to do the combine of the files yourself to create a single combined minified file - VM does not provide a combined file - note that you will also need to keep up with any changes in Vm=M to reflect these in your minifed version

Edit the cfg - then go into admin and save the VM config files

It is not done for JS
Regards
A

Joomla 3.9.27
php 7.4

Huubs

  • Jr. Member
  • **
  • Posts: 303
Re: Minify and combine CSS and JS in production
« Reply #4 on: August 15, 2021, 14:29:57 pm »
You have to do the combine of the files yourself to create a single combined minified file - VM does not provide a combined file - note that you will also need to keep up with any changes in Vm=M to reflect these in your minifed version

Edit the cfg - then go into admin and save the VM config files

It is not done for JS

Vm=M , what do you mean with that?


Minifying and combing the files, that is not a problem. But I don't know exactly how I disable the loading of the current scripts and enable the loading of my own scripts..

AH

  • Global Moderator
  • Sr. Member
  • *
  • Posts: 3487
  • VirtueMart Version: 3.8.9
Re: Minify and combine CSS and JS in production
« Reply #5 on: August 15, 2021, 15:56:45 pm »
There is no overrides for a combined minified JS - you would have to do this yourself in your own plugin

Sorry - I meant

Note that you will also need to keep up with any changes in VM core CSS files -common and -site to ensure you have an up to date update  minifed version
Regards
A

Joomla 3.9.27
php 7.4