2021-06-24 :: 코드 스플리팅과 이모션

웹사이트가 커지면 수백 페이지가 되지만 이를 하나의 js파일로 만든다면 엄청 느려진다. 화면 랜더링이 3초이상 걸리면 안된다.

필요한 컴포넌트를 필요할 때 불러온다. 어려운 점은 어떤 기준으로 컴포넌트를 구분할 것인가? 먼저 페이지 별로 구분한다.

서버사이드 랜더링이 필요없는 애들도 서버와 별개로 작동하도록 스플리팅 해준다.

 

npm i @loadable/component

npm i --save-dev @types/loadable__component

이 패키지로 스플리팅을 진행하겠다.

페이지 단위로 대충 코드 스플리팅을 해주고 굳이 더 신경쓰지 말자

 

css의 여러가지 선택지가 있다

inline

cssmodule className과 연결

css in js, emotion 설정이 간단하다, 서버사이드 랜더링 할 때도 더 쉽다.

npm i @emotion/react @emotion/styled

패키지 삭제는 다음 명령어를 사용한다.

npm rm @emotion/core

사용 방법은 styled component와 비슷하다.

styles.tsx

import styled from '@emotion/styled';

index.tsx

import { Button, Error, Form, Header, Input, Label, LinkContainer, Success } from '@pages/SignUp/styles';

& > span

해당 태그의 자식태그 span

 

npm i @emotion/babel-pulgin

form 안에 label이 있는 경우

& ${Label}

 

webpack plugin setting

배열로 감싸고 두번째에 소스맵

env: {
  development: {
    plugins: [
      ['@emotion', { sourceMap: true }],
      require.resolve('react-refresh/babel'),
    ],
  },
  production: {
    plugins: ['@emotion'],
  },
},

 

세팅 한 번 쓰면 돌려쓰면 편하다

ts 컴포넌트 타입 뭐 써야할지 모르면 그냥 비워놓고 돌린다. 그 다음 에러메시지 보고 삽입하자