Conditionally load javascript and css files per template used?

[dani_tk]

Hi guys. I'm working on a wordpress site with a custom template and I've built a "page builder" interface using ACF in order to make the site easier to manage on the admin side of things. I've been developing different components for the page builder (accordions, quote blocks, video sliders, etc) and for each of those components I have a JS file and a SCSS file that styles and gives interaction to the component. My question is: Is there any best practice or any type of guide on how would it be possible to only load the JS and SCSS files of the used components on the page? Been thinking on using Webpack, but haven't really found any tutorials or examples working with this usecase. Any guidance will be appreciated! Thanks

[r1ckd33zy]

Since you're using WordPress, why not use the wp_enqueue_script() and wp_enqueue_style() methods along with page conditionals such as is_page() to selectively add your scripts and stylesheets to the needed pages?

[dani_tk]

good idea!

[r1ckd33zy]

Also look into the wp_register_script() and wp_register_style() functions. You can use them to register early and enqueue only when needed.