Тришейкинг статических компонентов

Ключевая концепция Qwik заключается в том, что Qwik загружает код только для тех компонентов на клиенте, которые нуждаются в повторном рендере. Если компонент статичен (не требует повторного рендера), Qwik не будет загружать компонент. Это одна из форм динамического тришейкинга. Здесь используется слово динамический для того, чтобы отличить его от классического статического тришейкинга.

Сравнение статического и динамического тришейкинга

Статический тришейкинг - это когда бандлер удаляет недоступный код при сборке. В случае приложения все компоненты доступны. Это происходит потому, что компонент доступен при первоначальном рендере в случае SSR. Иначе компонент не будет виден клиенту. Поэтому статический тришейкинг не может удалить ни одного компонента из нашего начального дерева рендера приложения.

Динамический тришейкинг учитывает тот факт, что после первоначального рендера компонент больше не доступен для операций, которые может выполнить пользователь. Компонент доступен только при первоначальном рендере SSR, но не при последующих взаимодействиях с пользователем. Именно поэтому мы используем термин динамический тришейкинг, чтобы отличить его от статического тришейкинга, который будет выполнять бандлер при сборке.

Недостатком статического тришейкинга является то, что он не учитывает контекст рантайма при принятии решения о достижимости конкретного компонента. Он должен предполагать наихудший сценарий и поэтому сохраняет компонент в том виде, в котором он доступен на сервере во время SSR.

Пример

Поработайте с примером, кликнув на кнопку +1. Несколько моментов, на которые стоит обратить внимание:

• Сервер должен выполнить все компоненты. Таким образом, с точки зрения сервера, все компоненты необходимы.
• На клиенте нажатие +1 не требует загрузки <App>, поскольку ему не нужно перерисовываться. Поэтому <App> никогда не загружается на клиенте.

Теперь отредактируйте Child и удалите привязку к {props.store.count}. Обратите внимание, что теперь дочерний элемент больше не отображается на клиенте, а связанный с ним код рендера никогда не загружается.

Qwik определяет, какие компоненты необходимы, исходя из контекста выполнения приложения. Привязка данных определяет, считать компонент статическим или динамическим и, следовательно, будет ли компонент тришейкаться.

На практике многие компоненты являются статичными в приложении, и их никогда не нужно загружать с клиента.

Next: Захват лексической области

Edit Tutorial