Svelte 마이그레이션의 경험과 주의사항

최근 다소 복잡한 웹 애플리케이션을 업데이트했습니다. 이 애플리케이션에는 인증, Stripe, i18n, 다크/라이트 모드, PWA 등과 같은 기능이 있습니다. 전체적으로 약 30페이지와 구성 요소가 있으며 타사 npm 패키지는 거의 없습니다.

앱을 Svelte 5로 마이그레이션할 때 상당히 어려웠던 점을 지적하고 싶습니다.

자동 마이그레이션 스크립트 해머

Svelte에서 제공하는 자동 마이그레이션 스크립트는 터미널 npx sv migration svelte-5에서 이 "one-liner" 명령을 사용하여 작업을 수행할 수 있습니다(필요한 업데이트를 모두 수행하고 설치한 후: "@sveltejs/vite). -plugin-svelte": "^4.0.0" 및 "svelte": "^5"). 그러나 나는 이 "망치" 접근 방식을 권장하지 않습니다.

Ctrl Shift P(Windows/Linux) / Shift 명령 P(Mac)를 사용하여 파일별로, 구성 요소별로 이동하고 다음에서 Migrate Component to Svelte 5 Syntax 명령을 사용하세요. 대신 VS Code 명령 팔레트를 사용하세요. 그렇게 하면 더 많은 제어력을 갖게 됩니다.

더 이상 사용되지 않는 run()

대본은 기적을 일으킬 수 없습니다. 반응형 변수 선언을 $state()로 업그레이드하는 것은 일반적으로 괜찮습니다. 그러나 스크립트는 $:를 $derived()/$derived.by(() => {}) 또는 $효과(() => {})로 변환해야 하는지 감지하는 데 어려움을 겪을 수 있습니다.

그럼 어떨까요? 자동 마이그레이션 스크립트를 사용하면 많은 run(() => {})이 발생할 수 있습니다.

예를 들어 다음과 같은 간단한 예를 들어보겠습니다.

<script>
...
   let notext = false;
   $: if (data.completeDoc == 'NoLangVersion') {
      notext = true;
   }
   $: if (data.completeDoc !== 'NoLangVersion') {
      notext = false;
   }
</script>

...
{#if notext}
   {data.userPrefferedLang.noTextWarning}
{:else}
...
{/if}
...

자동 마이그레이션 스크립트는 다음을 제공합니다.

<script>
    import { run } from 'svelte/legacy';
...
    let notext = $state(false);
    run(() => {
        if (data.completeDoc == 'NoLangVersion') {
            notext = true;
        }
    });
    run(() => {
        if (data.completeDoc !== 'NoLangVersion') {
            notext = false;
        }
    });
</script>

실행 기능이 더 이상 사용되지 않습니다라는 작은 경고가 표시됩니다.

내 생각에는 Svelte 5 코드가 더 좋을 것 같습니다.

<script>
...
    let notext = $derived.by(() => {
        if (data.completeDoc == 'NoLangVersion') {
            return  true;
        }
        if (data.completeDoc !== 'NoLangVersion') {
            return false;
        }
    });
...
</script>

또는 코드가 다음과 같이 복잡하지 않은 경우:

<script>
...
    let notext = $derived(
        data.completeDoc == 'NoLangVersion' 
        ? 
        true
        :
        false
        ) 
...
</script>

이유는 스크립트가 코드를 $derived.by(() => {})로 쉽게 변환할 수 없기 때문에 $ effect()에 좀 더 더러운 접근 방식을 사용하고 싶어하기 때문입니다. 그러나 $ effect()는 클라이언트 측에서만 실행되므로 스크립트는 더 이상 사용되지 않는 실행 함수를 대신 사용합니다.

가능하다면 $효과를 피하세요

이제 가장 중요한 내용에 도달했습니다. 클라이언트 측에서만 실행되는 $ effect()입니다. 따라서 사전 렌더링 페이지 및 SSR을 위해 서버에 $효과()가 없습니다.

$ effect()는 서버에서 실행되지 않습니다!

이 점은 Svelte 5 문서에서 정말로 강조되어야 합니다.

이 두 가지 예를 살펴보세요.

<script>
let a = 1
let b = 2

$: c = a + b
</script>

{c}  // server responds with c == 3

<script>
let a = $state(1)
let b = $state(2)
let c = $state(0)

$effect(() => {
  c = a + b
})
</script>

{c}  // server responds with c == 0

동일하지 않습니다. 이로 인해 많은 어려움이 발생합니다. 클라이언트는 페이지를 마운트할 때 c 변수를 재평가해야 합니다. 페이지는 서버에서 전송될 때와 클라이언트에서 최종적으로 DOM 렌더링될 때 다르게 보입니다(SSR, SEO, 깜박임 문제 등).

따라서 항상 $효과() 대신 $derived 또는 $derived.by(() => {})를 사용하도록 노력하세요. 그러면 많은 수고가 줄어들 것입니다.

SvelteKit 및 SSR에서 스토어 사용을 단념했을 때와 거의 같은 이야기입니다.

SvelteKit의 $ effect 대 onMount()

Svelte 5가 출시될 때 제공된 예제 덕분에 SvelteKit의 onMount()를 $ effect()로 바꾸고 싶은 유혹을 느낄 수도 있습니다. 이미 언급한 이유로 당분간은 이를 권장하지 않습니다. onMount는 여전히 핵심 Svelte 수명 주기 후크입니다.

$bindable $props 서프라이즈

또 다른 놀라운 점은 Svelte 5가 일관된 변수 값을 유지하도록 주의를 기울인다는 것입니다. 변수를 구성 요소에 prop으로 전달하고 나중에 구성 요소에서 이 변수를 변경하면 스크립트는 $bindable $prop를 사용하여 이 불일치를 해결하려고 시도합니다. 부모에게 알려야 앱 상태가 일관되게 유지됩니다.

이 예를 보세요:

<script>
...
   let notext = false;
   $: if (data.completeDoc == 'NoLangVersion') {
      notext = true;
   }
   $: if (data.completeDoc !== 'NoLangVersion') {
      notext = false;
   }
</script>

...
{#if notext}
   {data.userPrefferedLang.noTextWarning}
{:else}
...
{/if}
...

자동 마이그레이션 스크립트는 상위 항목이 업데이트된 값을 다시 얻을 수 있도록 바인딩된 값이 있는 구성 요소를 사용하기를 원합니다.

<script>
    import { run } from 'svelte/legacy';
...
    let notext = $state(false);
    run(() => {
        if (data.completeDoc == 'NoLangVersion') {
            notext = true;
        }
    });
    run(() => {
        if (data.completeDoc !== 'NoLangVersion') {
            notext = false;
        }
    });
</script>

하지만 아마도 $derived():
를 사용하여 더 간단한 방법을 사용할 수도 있을 것입니다.

<script>
...
    let notext = $derived.by(() => {
        if (data.completeDoc == 'NoLangVersion') {
            return  true;
        }
        if (data.completeDoc !== 'NoLangVersion') {
            return false;
        }
    });
...
</script>

:글로벌 { } 블록

마이그레이션 중에 발견한 아주 좋은 기능은 이제 CSS :global을 block과 함께 사용할 수 있다는 것입니다. 예를 들어 @html로 HTML 요소의 스타일을 지정하려면 :global을 사용한 스타일링이 매우 필요합니다.

이 대신:

<script>
...
    let notext = $derived(
        data.completeDoc == 'NoLangVersion' 
        ? 
        true
        :
        false
        ) 
...
</script>

이것을 사용할 수 있습니다:

<script>
let a = 1
let b = 2

$: c = a + b
</script>

{c}  // server responds with c == 3

구성요소의 소품으로서의 스타일

Svelte 4에서 CSS 클래스를 구성 요소에 대한 prop으로 제공하려면 {$$props.class}를 사용합니다.

<script>
let a = $state(1)
let b = $state(2)
let c = $state(0)

$effect(() => {
  c = a + b
})
</script>

{c}  // server responds with c == 0

Svelte 5에서는 class={className}:
을 사용할 수 있습니다.

// parent svelte file
<script>
   import ComponentBinded from './ComponentBinded.svelte';
   import ComponentWithDerived from './ComponentWithDerived.svelte';
   let name = $state('John Wick');
</script>

<p>Name value in parent: {name}</p>

<ComponentBinded bind:name={name} />

<ComponentWithDerived {name} />

등대 성능 저하 가능성

자동 병합 스크립트를 사용했을 때 앱 성능이 떨어지는 것을 보고 충격을 받았습니다. Svelte 4를 사용하면 거의 100%를 얻을 수 있었습니다. Lighthouse 점수가 다시 녹색으로 돌아온 것은 수동으로 마이그레이션하고 신중하게 고려한 후에야(주로 가능한 경우 $ effect()를 피하는 방법).

최종 단어

Svelte 5로 마이그레이션하는 데 예상했던 것보다 시간이 더 걸렸습니다. 하지만 아직 이 새 버전을 프로덕션에 적용하지 않았습니다. Svelte 5에 대한 업데이트는 여전히 꽤 높은 빈도로 제공되고 있습니다.

제 경험이 다른 사람들에게도 도움이 되기를 바랍니다.

위 내용은 Svelte 마이그레이션의 경험과 주의사항의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!