Hi guys,
I’m currently testing sage9 with webpack and I started wondering which is the best way of organising bundles in an website/application.
In my understanding, there are basically 2 different approaches to this:
Create different entry points and load the manually in the wp_head section of the website
Create different entry points and require them via ajax within the main bundle (say main.js) by adding the require.ensure within the proper bodyclass event
what’s your point of view on this? I tried searching around for best practices but I’m still having doubts about which is the best way to go.
I realize this post is from May so not sure if you’re still working through this issue, but figured i’d chime in with my experience.
What you’ve outlined above are two totally legitimate paths to explore and in the end it’s up to you to to make the deciding call based on the type of site you’re working on, but at the end of the day there are multiple ways you could incorporate webpack into your front-end build process.
I’ve seen great performance from sites that utilizing both a critical css layer loaded in wp_head along with multiple page specific entry points that are loaded asynchronously based on the results of wp conditional tags.
When I say asynchronously I don’t necessarily mean loading through require.ensure but rather by tapping into the script_loader_tag filter and adding specific async or defer attributes. You can read about this here.
If you’re working with a site with only a few page variations and under ~8000 lines of CSS i’d say it’s overkill to get into multiple entry points, but if you have a site that includes over 5 custom templates each with their own unique styling then you may consider breaking the CSS & Javascript involved into modular pieces.
Happy to explain dealing with larger, heavier sites as well just let me know!