3

We have, because of various reasons, a rather special solution with an epi backend bundled with a Vue SSR frontend. The frontend nodejs server only supplies the SSR and is not used as a webserver. This means no frontend routing is used and the page is reloaded and setup for every page load.

As of now all components (for example a hundred epi blocks and pages) are registred globally since we dont know where and when they will be needed. This of course creates a unnecessary large js bundle with like 90% of the code never used.

My question is; Until we rebuild the solution completely (for future headless epi support) is there a way to split the components and dynamically load only the ones needed for every page load?

From what I've understand (and my testing) you cant use dynamic imported components with Vue SSR without using routing.

For example I'd like every component to be a separate file so they could be cached and keep the initial page load smaller. Or if anyone has a better suggestion =)

Per
  • 332
  • 3
  • 18

1 Answers1

0

We did something similiar with web pack bundling. We read the blocks within the content area, then bundled and loaded the blocks, using webpack-import-glob-loader and terser-webpack-plugin.

Jon Jones
  • 1,014
  • 1
  • 9
  • 17
  • Sorry for late answer. We do use webpack but I can't see how glob-loader and terser-webpack would help us achieve this. Maybe if you have some details? – Per Apr 09 '21 at 10:13