개발 모드에서 이 HTML 템플릿을 컴파일하는 데 Vue가 매우 느림

개발 모드에서 이 HTML 템플릿을 컴파일하는 데 Vue가 매우 느림

vue CLI로 부팅 스트랩한 템플릿 애플리케이션 설정을 사용하고 있습니다.20개의 네스트된 컴포넌트가 하나 있습니다.div태그. 개발 모드에서 이러한 컴포넌트를 컴파일하는 데 약 10초가 소요됩니다.html 요소를 깊게 삽입할수록 시간이 더 오래 걸리고 시간이 기하급수적으로 증가합니다.

이 동작이 정상입니까?컴파일 시간을 단축할 수 있는 방법이 있나요?

다음은 예를 제시하겠습니다.https://gist.github.com/dmitrybelyakov/ed64145624f42188372500018671eb0f

여기서 제 자신의 질문에 답합니다: Bennett Dams의 SO 포스트 링크에 따라, 몇몇 사람들은 이미 이것을 조사했고, 그리고 여기에 문제가 있습니다.prettier내부에서 사용되는 라이브러리vue-loader특히 템플릿 컴파일러 유틸리티입니다.여기저기 예쁜 팀에게 문제가 보고되었지만, 아직 수정되지 않았습니다.

따라서 vue 템플릿 컴파일러는 이 문제를 즉시 해결할 수 있습니다.따라서 최대 30개의 html 요소를 중첩하면 기본적으로 컴파일러를 중지할 수 있습니다(개발 모드에서만 발생).

네스트된 수준(~4-5)의 요소가 적은 경우에도 마찬가지이지만, 그 중 몇 가지 요소는 컴파일 속도가 점차 느려지고 새로고침/주입 시간이 지연되므로 컴포넌트가 새로고침되기를 기다리는 데 어려움이 있습니다.

이 문제를 보고했습니다.vue-loader여기 #1426 팀에서는 예쁜이 사용을 무효로 하는 설정 옵션을 요구하고 있습니다.그러면 검토가 될 것입니다.

업데이트: 이 문제는 다음에서 수정될 것입니다.vue-loader경유로prettify추가된 config 옵션:https://github.com/vuejs/vue-loader/issues/1426

오래된 솔루션:

다만, 현재로선, 유일한 수정은 편집하는 것 뿐입니다.node_modules/@vue/component-compiler-utils/dis/compileTemplate.js다음과 같이 회선을 코멘트 아웃한다(97 회선 주위에 있어야 한다).

//code = prettier.format(code, { semi: false, parser: 'babylon' });

언급URL : https://stackoverflow.com/questions/53226650/vue-is-extremely-slow-to-compile-this-html-template-in-dev-mode