코드 최적화

🔮 코드 성능 영향 요소 점검 수칙

1. 패키지 최적화
   • 번들 사이즈 측정 결과 분석
   • 빌드 시간과 번들링 사이즈에 영향
   • 웹 페이지 리소스 로딩 속도 개선 기대
2. 렌더링 최적화 
   • Page 단위 Server-side Data Fetching 활용
   • 유저의 대기시간 최적화
   • 렌더링 속도(웹 화면 그려지는 로직) 개선 기대
3. 로직 최적화
   • Memory Leak 등 성능 영향 로직 수정
   • 브라우저 상호작용 속도 개선 기대

 

이번 포스팅에선 개발 과정에서 적용할 수 있는 번들 사이즈 최적화를 다룹니다.

---

번들 최적화

01. 원인 분석

번들 사이즈를 분석할 수 있는 다양한 도구들이 존재한다.

프로젝트 내 라이브러리별 비중을 파악해보고 그에 맞는 최적화 진단을 시작해보자.

• Webpack Analyse ( 가장 다양한 정보 제공 but 사용법 복잡 & 느림 )
• Visualizer ( 깔끔한 시각화 but 기능 부족 )
• Bundler Analyzer ( 원인 빠르게 찾기 위해 추천 )
  • 용량별로 시각화 제공 어떤 라이브러리 많이 사용되고 있는지 파악 가능

 

- 내가 생각하는 번들 최적화 : More lighter, Minimize duplication, code Optimization, write only you use

 

 

02. 번들 사이즈를 고려한 라이브러리 선정

원인 분석에 도달하기 전, 개발 과정에서 신규 라이브러리 설치 시 번들 피디아(https://bundlephobia.com/) 사이트에 접속하여 동일한 기능을 지원하는 라이브러리는 없는지 용량을 비교하고, 의존성이나 트리쉐이킹 지원 여부, 각 번들사이즈 확인해 가벼운 라이브러리 선정할 수 있도록 고려해야한다. (이런걸 계속 고려하다보면 라이브러리병이 생겨버린다. 사실 모든건 순수 코드로 해결할 순 있으니..ㅎ 그럼에도 도입전 입주 예정 라이브러리들에 대해 '과연 필요한것인가에' 대한 다방면적인 고민이 필요하다.)

번들 사이즈 및 버전별 용량 비교, 네트워크에 따른 다운로드 속도 정보 제공

tree-shaking이 되었을 때 함수별 용량 비교 및 비슷한 기능 지원하는 라이브러리들의 사이즈 비교

 

03. 라이브러리 중복 피하기

라이브러리 버전 맞추거나 동일 기능하는 라이브러리로 변환해 중복된 구현 피할 수 있다.

• 버전이 달라 중복된 라이브러리는 패키지매니저 npm 이나 yarn를 활용해 개선 가능
  • npm은 트리 구조로 필요한 모든 의존성을 관리하는 형식이지만 중복된 라이브러리가 쌓이게 되면 번들사이즈는 물론 node_modules도 과도한 용량을 차지하게 된다.
  • yarn의 경우 라이브러리 설치 과정에서 알맞게 처리해주는데 보다 강력한 기능을 위해 yarn dedupelicate 라이브러리 이용해 다양한 전략을 통해 중복된 라이브러리를 제거해준다.

 

04. 무거운 라이브러리 영향 최소화

Single Common Chunk는 새로운 라이브러리가 추가되면 모든 페이지 용량이 한번에 증가하는 문제점이 존재한다.

이 문제점을 해결하기 위해 페이지별 청크 파일의 영향 최소화하여 사용자 이동에 따라 필요한 청크만 받아올 수 있도록 분리한다.

• 개선된 청크 파일 종류 
  • Framework Chunk (프레임워크) : react, react-dom, next 등 라이브러리 등
  • Commons Chunk (공통) : 모든 페이지에서 사용하는 코드 모아둔 청크
  • Shared Chunk : 2페이지 이상 공유하는 코드 모아둔 청크
  • Page별 Chunk : 특정 페이지에서만 사용하는 청크

    ➨ 프레임워크와 공통 청크 파일은 모든 페이지에서 받아지며 먼저 진입한 페이지에서 캐싱되어 효율적으로 리소스 관리가 가능하다.

 

 

05. 코드 스플리팅

대부분 웹페이지는 각각의 페이지별로 나눠져있어 다른 페이지의 코드가 존재할 필요가 없다. 필요한 것만 남기되 모든 파일을 하나로 합치지 않고 따로 분리하는 것, 이를 통해 사용자가 접속한 페이지의 코드만 로드하여 로딩시간과 트래픽 줄어들게 해주는 효과를 제공한다.

버튼을 누르는 시점에 useState 값이 true가 되고, <SplitComponent>가 렌더링 되므로 로딩을 시작하는 구조

---

1. import( ) 사용
   
   • 필요한 시점에 컴포넌트 불러오도록 import를 함수로 사용하면, Promise 를 반환한다.
   • 이 함수는 모듈을 비동기적으로 CommonJS 형태로 불러오니, 따로 default 를 명시해주어야 한다
   • 개발자도구에서 Network 탭에서 확인하면 분리된 청크 파일(chunk.js)에 splitting 코드가 불러오게 된다
   • import 를 함수로 사용해주면, 웹팩이 알아서 코드를 분리를 하여 따로 저장하고, import 가 호출 될 때 불러와서 사용 할 수 있게 해준다
   - 함수 & 컴포넌트 스플리팅
   

   import { useState } from "react";
   
   export const App = () => {
       const [component, setComponent] = useState(null);
       const onClick = () => {
           import('컴포넌트경로').then(result => setComponent(result.default)); // 1. 컴포넌트 방식 1
           import('./컴포넌트경로').then(({ default: SplitMe }) => {setSplitMe({SplitMe})}); 1. 컴포넌트 방식 2
           import('./notify').then(({ default: notify }) => {notify()}); // 2. 함수
       }
   
       return (
           <div>
               <button type="button">click me</button>
               {component && <component />}
           </div>
       );
   };

    
   - HoC 작성을 통해 splitting 컴포넌트 재활용
   
   • 코드 스플리팅 할 때 반복되는 로직을 함수화
   • 더 간편한 코드 스플리팅 및 로직 최적화를 돕는다

   import React, { Component } from 'react';
   
   const withSplitting = getComponent  => {
   	const [Splitted, setSplitted] = (null);
   	const preload = () => {
         // Splitted 기본값은 null이지만 preload 호출되면 Splitted 가 설정되고
         getComponent().then(({ default: Splitted }) => {
           setSplitted(Splitted);
         });
     }
   	// 여기서 getComponent는 () => import('./SplitMe')의 형태로 함수가 전달되야 한다.
   	const handle = (getComponent) => {
   		getComponent().then(({ default: Splitted }) => {
           setSplitted(Splitted);
         });
   	}
   
   	// 컴포넌트가 생성되는 시점에서 Splitted 사용하게 되므로 null 이나 컴포넌트를 사용하게됨
      if (!Splitted) return null;
      return <Splitted />;
   };
   
   export default withSplitting;

   
   

   import React, { Component } from 'react';
   import withSplitting from './withSplitting'; // HoC import
   
   const SplitMe = withSplitting(() => import('./SplitMe')); // 스플리팅 코드 상단에 작성해주면 끝!
   
   export const App = () => {
     const [visible, setVisible] = (false);
     const handleClick = () => setVisible(true);
   
     return (
         <div>
           <button onClick={handleClick}>Click Me</button>
           {visible && <SplitMe />}
         </div>
     );
   }

   
   - 라우터 작성
   

   import withSplitting from '../withSplitting';
   
   export const Home = withSplitting(() => import('./Home'));
   export const About = withSplitting(() => import('./About'));

   
   

   import React, { Component } from 'react';
   import { Route, Link } from 'react-router-dom';
   import { About, Home } from './pages';
   
   export const App = () => {
       return (
         <div>
         	<Link to="/">Home</Link>
           <Link to="/about" onMouseOver={About.preload()}>
           <hr />
           <Route exact path="/" component={Home} />
           <Route path="/about" component={About} />
         </div>
       );
   }

   
   
   
2. Dymanic Import 사용
   webpack 에서 지원해주고 있는 함수로 별도의 설정 없이 사용 가능하다.
   동적 코드 분할, lazy-load = 게으른 로딩
   런타임시에 필요한 module 을 import 가능
   
   페이지 진입시에 필요한 최소한의 코드만 다운받아 첫 페이지의 초기 성능올릴 수 있다
   사용자가 클릭할 때마다 Import 함으로서, 분할하여 관리할 수 있게 된다.
   
   Webpack 에서 Dynamic Import 를 사용하기 위해서는 babel-plugin-syntax-dynamic-import 플러그인이 필요
   

   // babel.config.json
   {
     "plugins": ["@babel/plugin-syntax-dynamic-import"]
   }​

   
   chunk 파일 명은 webpack 의 output 에 세팅 한 파일명을 따라간다
   

   module.exports = { 
   	output: { 
       	filename: '[name].js', 
           chunkFilename: '[name].chunk.js', 
   	}, 
   }

   
   

   import dynamic form 'next/dynamic';
   
   const PageA = dynamic(() => import('./PageA'));
   const PageB = dynamic(() => import('./PageB')); // webpackPrefetch : true​

   • 웹팩 magic comment 이용시 prefetch 기능 이용할 수 있다.
   • 여유로운 시간에 미리 받아두어 사용자에게 최소한의 지연 시간 줄 수 있다.
   • 적절한 DI와 Prefetch 이용해 초기 로딩 속도를 절반 가까이 줄일 수 있었다.
     
     
     
3. React.lazy() +  <Suspense> 사용
   
   • React.lazy() : 컴포넌트 랜더링시점에 비동기적으로 로딩하게 해주는 함수
   • <Suspense> : 코드 스플리팅된 컴포넌트 로딩 & 로딩전 보여줄 컴포넌트 지정가능

   import React, { useState, Suspense, lazy } from "react";
   
   const SplitComponent = lazy(() => import('컴포넌트경로'));
   
   export const App = () => {
       const [visible, setVisible] = useState(false);
       const onClick = () => {setVisible(prev => !prev)};
       
       return(
       	<div>
              <button type='button' onClick={onClick}></button>
              <Suspense fallback={<div>...loading</div>}>
                {visible && <SplitComponent />}
              <Suspense/>
           </div>
       );
   }

   
   
   
4. loadable 사용
   

   npm i @loadable/component

   • 사용법 React.lazy()와 비슷 & <Suspence> 사용없이 로딩 화면 및 편리한 preload 기능 지원
   • 사용자가 버튼에 마우스를 올리면 컴포넌트 로드

   import { useState } from "react";
   import loadable from "@loadable/component";
   
   export const App = () => {
       const SplitComponent = loadable(() => import('컴포넌트 경로'), {fallback: <div> loading </div>})
       const [visible, setVisible] = useState(false);
       const onClick = () => {setVisible(prev => !prev)};
       const onMouseOver = () => {SplitComponent.preload()};
       
       return(
       	<div>
              <button type='button' onClick={onClick} onMouseOver={onMouseOver}>Click!</button>
              <Suspense fallback={<div>...loading</div>}>
                {visible && <SplitComponent />}
              <Suspense/>
           </div>
       );
   }

   
   

 

5. react-loadable (도입전 이 라이브러리가 진짜 필요한가!! 고민하기)

import React from 'react';
import Loadable from 'react-loadable';

const Loading = () => {
  return <div>로딩중...</div>;
};

// 로딩중일때 렌더링 할 컴포넌트따로 지정 가능
export const Home = Loadable({
  loader: () => import('./Home'),
  loading: Loading
});

export const About = Loadable({
  loader: () => import('./About'),
  loading: Loading
});

 

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import { About, Home } from './pages';

export const App = () => {
    const handleMouseOver = () => {About.preload()};
    return (
        <div>
            <Link to="/">Home</Link>
            <Link to="/about" onMouseOver={handleMouseOver}>About</Link>
            <hr />
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
        </div>
    );
}

 

6. SSR (Next.js 같은 프레임워크 활용)

ssr 시점에서 페이지 단위로 사용자에 필요한 데이터를 추후에 받아오면서 번들 사이즈를 줄일 수도 있다.

react-query의 useQuery와 유사한 인터페이스를 갖는 `useResource`를 도입해 기존 코드를 마이그레이션 해보는것도 추천한다!

수천줄이 넘는 서비스를 마이그레이션해야될 경우 비용을 줄이는 것은 아주 중요한 일이므로, 항상 최소한의 리팩토링 리소스 대해 고민하는 것도 개발자로서 중요한 자질이라고 느껴지는 한 주였다.

 

---

 

코드 최적화에 대한 나의 생각

프론트 트렌드는 정말 많이 바뀌고 이외에도 번들 사이즈를 줄일 수 있는 다양한 방안이 존재한다. 본질은 번들 사이즈를 줄여 - 유저에게 화면이 그려지는 속도, 웹사이트의 실질적인 퍼포먼스 향상을 위한 작업이다. 이전부터 어떤 방법들이 쓰여져 왔는지 그길을 공부해보면 내 기준에서의 좋은 방안를 찾게 되는 것 같다. 🙆‍♀️ 코드를 최적화할 수 있는 다양한 방법을 앞으로도 알아가고, 유저가 기다리는 그리고 개발자의 시간을 아껴주는 동료가 되면 좋겠다 :)

 

 

---

도움을 준 포스트

• 웹 애플리케이션 패키지 최적화

쉽게 따라하는 프론트엔드 웹 어플리케이션 패키지 최적화

• React.lazy() & <Suspense>

react.lazy()와 Suspense

 

 

 

Posted by Ang