Vue SSR/Episerver 솔루션에서의 코드 분할

Vue SSR/Episerver 솔루션에서의 코드 분할

다양한 이유로 인해 Vue SSR 프런트엔드와 함께 epi 백엔드가 번들된 특별한 솔루션이 있습니다.프런트 엔드 nodejs 서버는 SSR만 제공하며 웹 서버로 사용되지 않습니다.즉, 프런트 엔드 라우팅이 사용되지 않고 페이지가 새로고침되어 모든 페이지 로드에 대해 설정됩니다.

현재 필요한 장소와 시기를 알 수 없기 때문에 모든 컴포넌트(예를 들어 100개의 epi 블록 및 페이지)가 글로벌하게 등록되어 있습니다.이 때문에 불필요하게 큰 js 번들이 생성되어 코드의 90%가 사용되지 않습니다.

질문입니다.솔루션을 완전히 재구축할 때까지(향후 헤드리스 EPI 지원을 위해) 컴포넌트를 분할하여 각 페이지 로드에 필요한 컴포넌트만 동적으로 로드할 수 있는 방법이 있습니까?

루팅을 사용하지 않고서는 Vue SSR에서 동적 Import 컴포넌트를 사용할 수 없는 것으로 알고 있습니다.

예를 들어, 모든 컴포넌트를 별도의 파일로 하여 캐시하고 초기 페이지 로드를 작게 유지하려고 합니다.또는 더 나은 제안이 있는 경우 =)

우리는 웹 팩 번들과 비슷한 것을 했습니다.콘텐츠 영역 내의 블록을 읽은 후 webpack-import-glob-loader 및 terser-webpack-plugin을 사용하여 블록을 번들 및 로드했습니다.

언급URL : https://stackoverflow.com/questions/66850060/code-splitting-in-vue-ssr-episerver-solution