Как определить, является ли компонент Svelte полностью статическим содержимым? - PullRequest
Новая
       11

Как определить, является ли компонент Svelte полностью статическим содержимым?

1 голос
/ 29 апреля 2019

Я работаю над генератором статического сайта, где я хотел бы иметь возможность поддерживать как реактивное взаимодействие с JavaScript, так и стандартные гиперссылки «загрузить новую страницу в браузер». Мне пришло в голову, что что-то вроде Svelte может подойти для этого; Я мог бы использовать поддержку рендеринга на стороне сервера, чтобы генерировать HTML для всех своих страниц, а затем я мог компилировать и поставлять компоненты JavaScript с hydratable: true для поддержки динамических функций.

Одна проблема, о которой я подумал в связи с этим подходом, заключается в том, что большинство компонентов моего проекта будут полностью статичными: только HTML и гиперссылки, без каких-либо обработчиков состояний или событий, и я не буду менять реквизиты, кроме случаев, когда я генерирую новый HTML-файл для другой страницы. Если бы я наивно генерировал JavaScript для гидратации всех этих компонентов во время загрузки страницы, я мог бы получить гораздо больший пакет (и больше работы, выполняемой во время выполнения), чем мне действительно нужно.

Предлагает ли Svelte какой-либо способ оптимизировать эту ситуацию? Могу ли я как-то проверить, является ли компонент чистой функцией его реквизита, чтобы я мог избежать его увлажнения, если мне это не нужно? Или компилятор достаточно умен, чтобы сделать это для меня?

1 Ответ

2 голосов
/ 29 апреля 2019

Это хороший вопрос, на который у нас нет простого ответа.

С помощью можно определить, есть ли у отдельного компонента значения, которые могут изменяться - svelte.compile(...) возвращает объект со свойством vars, которое представляет собой массив всех значений внутри компонента. Проверка этого массива покажет вам, какие значения никогда не переназначаются или не изменяются. (Он не скажет вам, есть ли у компонента обработчики событий, которые имеют побочные эффекты, но которые не влияют на состояние, что также необходимо для определения того, является ли компонент полностью статичным. мог бы добавить в будущем выпуск 3.x.)

Но это только половина истории. Рассмотрим компонент, который объявляет name prop ... 

<script>
  export let name;
</script>

<h1>Hello {name}!</h1>

... и который используется в вашем приложении примерно так: 

<Greeting name="world"/>

Что касается компилятора, когда он компилирует компонент <Greeting>, значение name может измениться в любой момент, поэтому небезопасно рассматривать его как полностью статический. Но если бы оно могло более целостно понимать ваше приложение, оно могло бы заменить {name} на world, что имело бы различные преимущества.

При увлажнении Svelte предполагает, что может существовать несоответствие между существующим DOM и тем, что должно быть там. Во многих ситуациях было бы безопасно предположить иное, и пропустить проверку поддеревьев, которые, как он знал, были статическими, что избавило бы от необходимости включать их в сгенерированный JS.

Как компилятор, Svelte необычайно хорошо расположен, чтобы иметь возможность использовать преимущества этих методов, но это работа, которую мы еще не предприняли. В идеале мы сможем обновить компилятор таким образом, чтобы ваши приложения стали меньше без каких-либо изменений. Если вы заинтересованы в том, чтобы начать экспериментировать с тем, что возможно в это время, то свойство vars, возвращаемое из svelte.compile(...) (а также свойство ast, я полагаю), - это то место, с которого нужно начинать.

...