코드 스플리팅

액티비티별로 코드 스플리팅 후 전환 효과를 올바르게 렌더링하려면 다음과 같이 설정해야 해요.

// as-is:
import { lazy } from "react";
import { stackflow } from "@stackflow/react";
 
stackflow({
  // ...
  components: {
    MyActivity: lazy(() => import("./activities/MyActivity")),
  },
});
 
// to-be:
import { stackflow, lazy } from "@stackflow/react";
 
stackflow({
  // ...
  components: {
    // `@stackflow/react`에서 제공하는 `lazy()`로 교체해요
    MyActivity: lazy(() => import("./activities/MyActivity")),
  },
});

이는 해당 JS 에셋을 가져오는 동안(Promise가 pending 상태인 동안) 스택 상태 변경을 일시 중지하고, 로딩이 완료되면 다시 상태 변경을 재개하기 위해서에요.

구조화된 액티비티 API 파이프라이닝