Vue очень медленно компилирует этот HTML-шаблон в режиме разработки

Question

Я использую настройку шаблонного приложения, которую я загрузил с помощью vue CLI. У меня есть один компонент, который имеет 20 вложенных тегов div. Компиляция такого компонента в режиме разработки занимает около 10 секунд. Чем глубже я вкладываю html-элементы, тем больше времени требуется, и время растет в геометрической прогрессии.

Это нормальное поведение? Есть ли способ улучшить время компиляции?

Вот пример: https://gist.github.com/dmitrybelyakov/ed64145624f42188372500018671eb0f

Answer 1

Отвечая на мой собственный вопрос здесь: после ссылки на этот пост SO Беннетта Дамса, некоторые люди уже исследовали это, и существует проблема с библиотекой prettier, которая используется внутренне vue-loader в частности их утилит компилятора шаблонов. О проблеме сообщили более симпатичной команде здесь и там , но она еще не исправлена.

Из-за этого компилятор шаблонов vue поставляется с этой проблемой из коробки. Поэтому, если вы вложите ~ 30 html-элементов, вы можете остановить свой компилятор (это происходит только в режиме разработки).

То же самое относится и к тем случаям, когда у вас есть меньше вложенных (~ 4-5) элементов уровней, но некоторые из них, в этом случае компиляция становится все медленнее, и время перезагрузки / внедрения страдает, что заставляет ждать, пока ваш компонент перезагрузит боль.

Я сообщил об этой проблеме vue-loader команде здесь # 1426 , запрашивающей параметр конфигурации, чтобы отключить использование более симпатичных, так что, надеюсь, он будет рассмотрен.

ОБНОВЛЕНИЕ: теперь это должно быть исправлено в vue-loader с помощью добавленной опции конфигурации prettify: 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' });