Enqueue only the assets (.css and .js) from the the components used on a specific page #362
-
|
Instead of enqueueing a main.css and main.js, is there a way to enqueue only the files from the components used on a specific page? For example, I have a total of 15 components, but on the /about/ page I'm using only 4 components, so I'd like to enqueue only the following: Or even better (because I only need the Component 1 .css above the fold): Thanks! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 1 reply
-
|
hi @obritoluis , We also discovered, that despite having http/2 enabled, the page speed with one big js and css bundle was significantly faster, than with single files per component. This finally made us change the default way of how to load assets in Flynt. The fastest way to achieve what you are trying to do, will probably not to go the WordPress way, and enqueue separate assets for each component, but to make use of webpacks code splitting. This will be easier to achieve for the js part, css might be a bit tricky, as we extract the css into separate files. You would also need to integrate some javascript, most likely with the help of MutationObserver, to load the components that are present on a specific page. Alternatively you can have a look at how we built the assets pre Flynt v1.0.0. But this will be a bit of work as well, to change our current build process. Hope this helps. Let me know if you need more input. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @domtra ! Thanks for the thorough explanation! I'll take a look. Best |
Beta Was this translation helpful? Give feedback.
hi @obritoluis ,
thanks for the question. In versions of Flynt before v1.0.0, we actually enqueued assets only, when a component was on a page. We decided to change our loading strategy, however, because it made the build process and the enqueuing more complex than it needed to be.
We also discovered, that despite having http/2 enabled, the page speed with one big js and css bundle was significantly faster, than with single files per component. This finally made us change the default way of how to load assets in Flynt.
The fastest way to achieve what you are trying to do, will probably not to go the WordPress way, and enqueue separate assets for each component, but to make use of webpacks…