프로젝트 웹사이트 최적화

참고한 사이트다. 프로젝트를 최적화하는데 정말 큰 도움이 되었다.

https://medium.com/myrealtrip-product/fe-website-perf-part1-6ae5b10e3433

마이리얼트립 웹사이트 성능 측정 및 최적화 Part 1. 리소스 로딩

최적화 과정

1. webpack-bundle-analyzer 설치

처음부터 난관에 부딪혔다. CRA를 통해서만 프로젝트를 구성하고, 따로 webpack을 구성해본적이 없어 이쪽에 관한 지식이 거의 없는 상태다. 이전에도 Antd를 사용하기 위해 Sass를 설정하기위해 eject를 해봤지만 실패했던 경험이 있었다. 이번에도 eject를 통해서 webpack.config.js를 수정하려고 했지만 결국 실패했다. 

검색을 하다보니 cra-bundle-analyzer가 있어 이를 해결할 수 있었다.

보기만해도 숨이 막혀오는 번들상태다. 개발하면서 정리를 하나도 하지않고, ui framework를 2개나 사용했더니 이미지가 거의 없음에도 엄청난 크기를 보여준다.

2. 초기 상태 확인

초기 network상태

글에 작성되어있는대로 fast 3g, disable cache를 해보니 큰 프로젝트가 아닌데도 불구하고 로딩하는데 무려 18초에 가까운 시간이 걸렸다. 개선할 부분이 많아 보인다.

3. code spliting

React.lazy를 통해서 진행했다. 페이지에서 추천하는대로 처음에는 router에 적용시켜서 개선시켰다.

router에 lazy를 적용시켰으며 DOMCotentLoaded시간이 50%로 줄어든것이 가장 큰 차이점이며 load시간이 경우마다 살짝씩 다르지만 1~2초정도 load시간이 줄었다.

4. 외부 라이브러리 최적화

• 라이브러리 통합 : reactstrap, antd, material ui로 사용되던 것을 material-ui와 reactstrap으로 축소
• 불필요한 라이브러리 제거 : sass, moment-timezone, 
• 용량이 작은 라이브러리로 교체

codesplit, library최적화

 reactstrap을 없애지 못했는데도 번들 사이즈에서 40%나 개선이 이루어졌다.  

library최적화

이전에 비해서 약 20%의 로드시간 감소가 이루어졌다.

antd, material-ui, reactstrap이 혼용되서 사용되고 있어서 축소시켰는데, reactstrap은 시간 관계상 없애지 못하고, antd만 없애는데 프로젝트의 절반정도를 수정했다. 시간이 오래걸렸는데 앞으론 가능한 ui framework를 사용 안하는것이 좋아보인다. 용량도 용량이고, 수정하는데 진짜 복잡하다.

5. 이미지 sprite

 해당 프로젝트에서는 icon을 library에서 받아서 사용하거나 로드해서 사용했기 때문에 적용한 부분이 없지만, 기존에 인턴하면서 sprite를 해봤던 기억으로는 이미지를 한장으로 모아서 css의 background를 사용해서 적용했던 것으로 기억한다.

6. lazy loading

이미지 레이지 로딩을 적용시키는 경우는 화면에 바로 보여지지 않는 이미지이거나, 한 화면에 많은 이미지가 보여주는 경우에 적용하면 된다. 참고한 사이트의 코드를 참고해서 작성해서 custom hook으로 만들어 이미지가 들어가는 요소에 적용시켰다.

이미지 레이지 로딩

 실행 시간이 30%정도 개선된것이 보인다. IntersectionObserver를 무한 스크롤에도 사용할 수 있으나 해당 프로젝트에서는 스크롤이 늘어나는 경우들은 pagination을 통해서 구현했기때문에 따로 수정해줄 부분은 없었다. 스켈레톤까지 적용시키고 싶었으나, 이부분은 시간 관계상 스킵했다.

Part2에 적힌 부분도 수정하고 싶으나, 면접을 준비해야하는 관계로 자세한 학습이 어려워 일단 미루고 현재까지의 결과물에 만족하도록 하겠다.