В чем разница между асинхронным и статичным импортом в vue3?

Question

[Александр]

У меня есть компонент, который импортируется асинхронно через defineAsyncComponent
Я подготовил пример, нужно грузить приложение на ширине > 760 и сразу уменьшить ширину экрана < 760, после этого на клиенте мы увидим, что в шаблоне текущее значение ширины будет корректным, но стилей у компонента не будет

<template>
    <div :style="windowSize.width < 760 ? 'border: 1px solid red' : ''">
        window size: {{ windowSize }}
    </div>
</template>

Если уже на клиенте изменять ширину экрана, то стили будут отображаться согласно условию

Если я в своем примере сделаю статичный импорт таких проблем не будет

import AsyncComp from '../components/AsyncComp.vue'

В чем разница между асинхронным и статичным импортом? Почему это так работает?

https://codesandbox.io/p/devbox/bitter-rgb-mtk2q8

Answer 1

[Николай]

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

Когда это может выстрелить в ногу-
Предположим, у тебя есть модальное окно, в нем у тебя через defineAsync грузится иконка, как компонент, так вот, при открытии первого раза, у тебя будет эффект мерцания, потому что, компонент загрузился и остался.
Как лучше использовать ? ну, тут все от задачи зависит.