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
defer attributes. You can read about this here.
Happy to explain dealing with larger, heavier sites as well just let me know!