서비스 동작이 느린

최근 아처 전설은 스마트 폰 앱 전용 【멀티 모집 게시판 서비스】을 출시했습니다.

기술로는 Node.js/React/TypeScript/Express/Webpack을 사용했습니다. 이 서비스, 모집 스레드의 리얼타임 갱신을 어필하고 있습니다만, 그 중요한 bundle.js가 움직이기 시작하는 것이 늦지요.

거기서 SSR(Server Side Rendering)에 대해서 조사하고 있으면이런 사이트이 나오고, 굉장히 알기 쉬운 야케! 그리고. 요컨대 Node.js는 대단하고 빠르지만, 역시 SSR하지 않는 것이 동작은 빠르지요. 하지만 SEO의 관점과 UX 고려하면 뭐 SSR하는 것이 좋지요.

그래서 중요한 것이 js의 읽기 속도. 이번 Webpack을 사용하고 있기 때문에 여기를 어떻게든 시키면! Webpack은 js 전부 일괄 정리해 줘서 엄청 편리한 반면, 그 bundle된 js 파일에 대해서 아무것도 하지 않으면 꽤 무겁습니다.

bundle.js를 줄이기 위해!

이번에는 React의 Material-UI를 사용하거나 Express.js를 사용하거나 작게 할 수있는 사촌은 여러 가지가있을 것 같았습니다. 사이즈 작게 하기 위해서, 조금 귀찮게 쓰는 방법이 되기도 합니다만, 이것은 유저빌리티 생각하면 하는 방법 없지요. 덧붙여서 아래의 이미지가 아무것도 손을 더하지 않고 bundle했을 때의 사이즈. 1.29Mb도 있습니다. (BundleAnalyzerPlugin은 하나님) 덧붙여서 이것 js 읽어내는데 10초 정도 걸렸습니다....

그래서이 중에서도 Material-UI가 997Kb ... 이것만으로 bundle.js 전체의 80 % 미만 점유하고있다 ...

ささ, bundle 사이즈 작게 해 봅시다.

Express.js

import compression from 'compression';
app.use(compression());

이것만으로 bundle.js를 gzip으로 압축 해줍니다. 너무 편리하고 웃음

Material-UI

//Good
import AppBar from '@material-ui/core/AppBar';
//Bad
import { AppBar } from '@material-ui/core';

위와 같이 다시 씁니다. 그것뿐입니다. 나의 경우는 많을 때는 1컴포넌트에 10개 정도 모듈을 import하고 있었으므로, 꽤 귀찮아...아래의 쓰는 방법이라면 한 줄로 거의 import 할 수 있으니까.
그래서 왜 아래는 안 되는가. 이것 직접 node_modules 디렉토리에서 찾으면 일목요연하지만, 아래의 경우라면 @material-ui/core 전부 인스톨 해 와서 그때부터 AppBar를 찾는군요. 그럼 용량 먹는군요.

CSS

const sheets = new ServerStyleSheets();
renderToString(
  sheets.collect(
    React.createElement(component)
  )
);
const css = (sheets.toString()).replace(/\s+/g, "");

제 경우에는 Material-UI에서 사용되는 css도 SSR에서 템플릿 엔진 (pug)에 전달할 필요가 있었기 때문에 css를 문자열로 전달합니다. 그래서, css나 js의 읽어들여에 공백이나 개행, 코멘트가 들어가면 그것 또한 느려집니다. 그래서 여기에서는 공백을 모두 삭제하여 CSS를 압축했습니다.

bundle 사이즈 비포 애프터

bundle 사이즈 438Kb!

Material-UI도 258Kb에!


결과, 800Kb 이상 압축할 수 있었습니다! 6.5할정 삭감할 수 있었는가?

【멀티 모집 게시판 서비스】 로딩도 훨씬 빨라졌습니다! 스트레스는 느끼지 않네요! Lighthouse에서 측정하면 Performance가 60점대에서 96점이 되었습니다! !

내게 필요한 옵션을 개선하고 싶지만 타사 코드의 영향을 줄이면 잘 모르겠습니다 .... 이 사이트 라고 생각합니다만... 누군가 가르쳐 주시면 다행입니다!

요약

Webpack등으로 bundle하거나, 여러가지 모듈 사용한다면 사이즈 작게 하려고 하는 것입니다!