NextJs 앱을 최적화해보자(with next/bundle Analyzer) - 2

🔴 사용자가 상호작용하는 컴포넌트

 앞서 살펴봤듯이 nestjs앱 초기 로드 시간이 오래 소요되는 page들이 존재했고 최적화가 필요했다.

mypage 210kB로 큰 비중을 차지하고 있는 것을 확인할 수 있었다.

//mypage/EditUser.tsx
"use client";

import EditUserImg from "./EditUserImg";
import { Box, Button, Flex, HStack, Text, VStack } from "@chakra-ui/react";
import ModifyPassword from "./UI/ModifyPassword";
import ModifyPick from "./UI/ModifyPick";

const EditUser = () => {
  return (
    <Box w={["95%", "80%", "50%"]} padding="100px 0" margin="0 auto">
      <Text fontSize={["20px", "25px", "30px"]} fontWeight="800" margin="10px">
        회원정보 수정
      </Text>
      <Box marginTop="30px">
        <EditUserImg />
        <hr />
        <VStack
          padding="30px 0"
          margin=" 0 auto"
          fontSize={["12px", "13px", "15px"]}
          spacing={6}
        >
          <ModifyPick />
          <Flex justifyContent="space-between" width="80%" height="40px">
            <HStack spacing={5}>
              <Text w="60px">아이디</Text>
              <Text>{"email"}</Text>
            </HStack>
          </Flex>
          <ModifyPassword />
          <Flex justifyContent="space-between" width="80%" height="40px">
            <HStack spacing={5}>
              <Text w={"60px"}>별명</Text>
              <Text>{"nickname"}</Text>
            </HStack>
            <Button>수정</Button>
          </Flex>
        </VStack>
      </Box>
    </Box>
  );
};
export default EditUser;

 다음 코드에 보이는 modifyPassword와 modifyPick은 modal이다. 즉, 내가 진행중인 프로젝트에서 버튼을 눌러서 상호작용을 해야만 보이는 컴포넌트인 것이다. 이것을 필요할 때만 가져오도록 dynamic import를 적용하는 것이 현명하다.

//적용 전
import ModifyPassword from "./UI/ModifyPassword";
import ModifyPick from "./UI/ModifyPick";

-----------------------------------------------------------
//적용 후
import dynamic from "next/dynamic";

const ModifyPassword = dynamic(() => import("./UI/ModifyPassword"));
const ModifyPick = dynamic(() => import("./UI/ModifyPick"));

 다음과 같이 modal컴포넌트들을 dynamic import를 적용시켰고 build를 해보았다.

무려 210kB -> 137kB까지 줄어들었다!!

🟠 추가적으로 생각한 부분

 사실 mypage의 요소들은 백엔드로부터 가져온 데이터를 보여주는 게 많기 때문에 mypage의 Title을 제외하고 모두다 dynamic import를 적용해주면 어떨까 했다. 그리고 loading처리를 하여 skeleton을 보여주기로 했다.

"use client";

import { Box, Center, Skeleton, Spinner, Text } from "@chakra-ui/react";
import dynamic from "next/dynamic";

const EditUser = dynamic(() => import("./EditUser"), {
  loading: () => (
    <Skeleton h="600px">
      <Center position="absolute" top={400} left={680}>
        <Spinner size="xl" />
      </Center>
    </Skeleton>
  ),
});

const EditUserContainer = () => {
  return (
    <Box w={["95%", "80%", "50%"]} padding="100px 0" margin="0 auto">
      <Text fontSize={["20px", "25px", "30px"]} fontWeight="800" margin="10px">
        회원정보 수정
      </Text>
      <EditUser />
    </Box>
  );
};

export default EditUserContainer;

 dynamic import를 하면 필요할 때만 import하는 과정이 있기 때문에 CSR처럼 동작한다. 그렇기 때문에 loading이라는 옵션이 있다. 가져오는 동안 잠깐의 delay가 있기 때문에 skeleton과 loading으로 UX를 신경썼다.

결과적으로 106kB까지 줄였다!!

👍올바른 피드백은 언제든지 환영입니다~!