In the current boilerplate, one single JS file is loaded on all the pages (public/wp-content/themes/coloredcow/main.js). This file is compiled from public/wp-content/themes/coloredcow/src/js/main.js.
Issue
With a single JS file, we missed out on the opportunity. There can be page-specific JavaScript like slider may be needed on a single page. I think it makes sense to load it on the pages on which we need it.
Possible solution 1
Have a single JS that contains generic code: public/wp-content/themes/coloredcow/main.js
Have multiple page-specific JS files: page-about.js, page-team
Running grunt will combine main.js with each page's JS file will create minified files for each file.
We will enqueue based on the page's slug
Possible solution 2
The first two steps are the same as above.
Grunt will not combine the page-specific JS file with the main.js and generate the just the minified file.
There will be two files that will be enqueued on each page (hence two requests): main.js and page-*.js
@rathorevaibhav would love to know your thoughts/questions.
What we have
In the current boilerplate, one single JS file is loaded on all the pages (
public/wp-content/themes/coloredcow/main.js). This file is compiled frompublic/wp-content/themes/coloredcow/src/js/main.js.Issue
With a single JS file, we missed out on the opportunity. There can be page-specific JavaScript like slider may be needed on a single page. I think it makes sense to load it on the pages on which we need it.
Possible solution 1
public/wp-content/themes/coloredcow/main.jspage-about.js,page-teammain.jswith each page's JS file will create minified files for each file.Possible solution 2
main.jsandpage-*.js@rathorevaibhav would love to know your thoughts/questions.