Laravel에서 Vue.js 구성 요소의 속도 향상

Question

데이터베이스에서 큰 릴리스 목록을 가져 오는 Vue.js 구성 요소가 있습니다.이 시점에서 우리는 모든 유용한 목록 필터링 기능을 사용하여 찾고있어. 문제는 페이지에 목록이 나타나기 전에 페이지가로드 된 후 매우 눈에 띄는 지연이 있다는 것입니다.

분명히 via ajax에서 데이터를로드하는 것이 순간적이지는 않을 수도 있지만, 예를 들어 내가 더 나은 결과를 얻을 수있을 것이라고 생각했습니다. Laravel을 사용하여 서버 측에서 데이터를 가져온 다음 포함 된 Blade 템플릿에서 구성 요소로 전달합니다. 지금까지는 컴포넌트가 데이터를 수신하고 표시 할 때까지 눈에 띄게 기다릴 필요가 없습니다.

Vue 구성 요소를 가능한 한 빨리 준비 할 수있는 간단한 방법이 있습니까? 나는 webpack을위한 prerender-spa-plugin을 살펴 봤지만 Laravel 라우팅과 적절하게 상호 작용하는지는 알 수 없습니다. 마찬가지로 서버 측에서 노드로 다시 렌더링하는 것은 가치가있는 것보다 더 많은 문제가 될 수있는 것처럼 보입니다.

비슷한 문제가 발생하여 좋은 해결책이있는 사람이 있습니까?

Answer 1

당신은 일을 할 수있는 곳이 너무 많습니다. 1 서버에. 쿼리 또는 일종의 캐싱. 두 번째는 고객 측에 있습니다. 수신/가져온 콜렉션을 처리 할 때. 10000 항목을 말하면, 언젠가 a : json 객체를 파싱하고, b : 필요한 vue 컴포넌트를 만들고 (행에 vue 컴포넌트를 사용하는 경우), 해당 dom을 생성합니다. 따라서 크기가 큰 청크에서 수신 된 데이터를 분할하여 처리하는 경우 Vue는 그에 따라 DOM을 업데이트합니다. DOM을 스트림과 같이 채 웁니다. 항상 가장 좋은 승인은 아니지만 많은 경우에 일하고 있습니다.