실전으로 배우는 웹 성능 최적화 for React

 

강의를 듣는 이유

1. Next.js로 성능 개선을 하다보니까 웬만한 건 다 Next.js가 해주는 걸 알게됐다.=> 그럼 리액트는 ?

2. 리액트에서 성능개선을 하는 법을 알고싶었다.

3. 네트워크 탭, 성능 탭을 잘 이용하는 법을 배우고 싶었다.

 

그래서 큰 돈 내고 구매~

 

1. 프론트 성능 최적화는 두개로 나눌 수 있다.

1) 로딩 성능 최적화 : 브라우저에서 리소스를 불러올 때의 성능을 최적화 한다.

2) 렌더링 성능 최적화 : 화면에 요소들이 그려질 때의 성능을 최적화 한다.

 

 

2. 성능 최적화 방법들

1) 로딩성능 최적화

• 이미지 사이즈 최적화 : 이미지의 크기를 줄인다.
• code spilit : 해당 페이지(ex. 메인페이지)에서 당장 필요없는 코드는 나중에 불러온다.
• 텍스트 압축 : 사용하지 않는 텍스트는 일부분만 불러온다.

2) 렌더링 성능 최적화

• Bottleneck 코드 최적화 : 성능을 잡아먹고 오래걸리게 하는 함수를 찾아내어 코드를 수정한다.

 

3. 분석 툴 :

강의에서 자주 사용하는 분석 툴, 이걸 얼마나 잘 분석하는지에 따라 성능을 최적화 할 수 있다.

• 크롬 Network 탭
• 크롬 Performance 탭
• 크롬 LightHouse 탭
• webpack-bundle-analyzer

 

4. 강의 따라하기

이미지 사이즈 최적화

 - 이미지 사이즈를 줄여주기 위해 ImageCDN 사용

 - (ImageCDN(Contents Delivery Network) : 물리적 거리의 한계를 극복하기 위해 소비자 (사용자)와 가까운 곳에 컨텐츠 서버를 두는 기술

- ImageCDN서버를 두고 파일을 압축하는 Image Processing 과정을 통해 이미지 사이즈를 줄여서 가져오자

- 요즘 사용하는 레티나 디스플레이는 같은 크기에 픽셀을 더 많이 표현할 수 있기 때문에

   불러오는 이미지의 사이즈를 사용할 이미지 크기의 두배로 해주는게 좋다.

 

상단 이미지를 보면 작은 상이즈 즉 120*120 사이즈를 사용하고 있지만 불러오는건 1200*1200 사이즈를 불러오고 있다.

리소스는 190kb이다.

 

이렇게 불필요하게 크게 불러와지는 이미지 사이즈를 줄이자.

 

 

이런식으로 이미지를 불러오는 코드에서(Unsplash가 제공하는 api) 이미지 사이즈를 넣음으로써 이미지 사이즈를 줄여서 가져온다.

 

 

이미지 상이즈 수정후 240*240 사이즈 , 9.9kb 로 줄었다.

 

BottleNeck 코드 최적화 + 성능탭 분석

 

퍼포먼스 탭을 분석하면 article이라는 api요청 및 콜백이굉장히 오래걸리는걸 알 수 있다.

성능-네트워크 탭을 보면 Article이라는 컴포넌트가 렌더링 되고 있는데 그 안의

removeSpecialCharacter함수가 굉장히 오래 걸리는 것을 알 수있다.

중간에 드문드문 끊어지는부분도 보이는데 이 부분은 심지어 요청이 너무 길어져서 끊어졌다 다시 실행되는 부분이다.

 

 

/*

 * 파라미터로 넘어온 문자열에서 일부 특수문자를 제거하는 함수

 * (Markdown으로 된 문자열의 특수문자를 제거하기 위함)

 * */

function removeSpecialCharacter(str) {

    const removeCharacters = ['#', '_', '*', '~', '&', ';', '!', '[', ']', '`', '>', '\n', '=', '-']

    let _str = str

    let i = 0,

      j = 0

    for (i = 0; i < removeCharacters.length; i++) {

      j = 0

      while (j < _str.length) {

        if (_str[j] === removeCharacters[i]) {

          _str = _str.substring(0, j).concat(_str.substring(j + 1))

          continue

        }

        j++

      }

    }

    return _str;

}

해당 코드는 이렇게 되어있는데

 

아티클 부분의 마크다운으로 작성된 특수문자를 필터링해서 삭제하는 코드다 이 부분을

 

1. 특수문자 처리하는 코드 최적화

 

2. 사용되는 텍스트 압축의 방법을 써보자.

/*

 * 파라미터로 넘어온 문자열에서 일부 특수문자를 제거하는 함수

 * (Markdown으로 된 문자열의 특수문자를 제거하기 위함)

 * */

function removeSpecialCharacter(str) {

    // const removeCharacters = ['#', '_', '*', '~', '&', ';', '!', '[', ']', '`', '>', '\n', '=', '-']

    // let _str = str

    // let i = 0,

    //   j = 0

    // for (i = 0; i < removeCharacters.length; i++) {

    //   j = 0

    //   while (j < _str.length) {

    //     if (_str[j] === removeCharacters[i]) {

    //       _str = _str.substring(0, j).concat(_str.substring(j + 1))

    //       continue

    //     }

    //     j++

    //   }

    // }

    let _str = str.substring(0, 300);

    _str.replace(/[\#\_\*\~\&\;\!\[\]\`\n\=\-]/g, "");

    return _str;

}

 

코드를 이렇게 수정해서

 1. 앞단에서 사용되는 텍스트 (300개만 줄여서 사용)를 줄여 텍스트를 압축해주고

 2. 정규식을 통해 코드를 한번에 교체할 수 있도록 최적화 한다.

 

 

 

article 을 줄 일 수 있었다... 사실 밑에 보이지 않을정도로 성능이 최적화 되었다 ㅋㅋ..