웹 성능 최적화

View

Front-End

웹 성능 최적화

김시기 2022. 5. 14. 15:37

* 인프런의 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1 강의를 듣고 작성한 글입니다.

https://inf.run/Ztjz

이미지 사이즈 최적화

Image processing CDN

이미지가 올라가 있는 서버에서 사용자에게 이미지를 전달해 주기 전에 크기를 조절하는 등 과정을 거쳐서 사용자에게 전달해 줌

이미지 cdn 서비스

imgix - The End-to-End Image Solution

코드 스플리팅

대부분의 React 앱들은 Webpack 같은 툴을 사용하여 여러 파일을 하나로 병합한 “번들된” 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드합니다.

코드 스플리팅 전

우리의 프로젝트를 예로 든다면 Meeting 페이지에서만 오픈비두 라이브러리가 필요한데, 한번에 번들된 js를 로드하다 보니 필요하지 않은 곳에서도 오픈비두 라이브러리를 로드하게 되는 것입니다.

따라서 코드 스플리팅을 통해 필요한 곳에서 필요한 코드만을 불러올 수 있도록 한다면 로드 시간을 줄일 수 있습니다.

Route-based code splitting

하지만 어느 기준으로 코드를 나눠야 할지 결정하는 것은 까다롭습니다.

이를 시작하기 좋은 장소는 라우트겠죠? url에 해당하는 라우트를 그때그때 로드할 수 있다면 우리는 전체 코드를 한번에 읽지 않아도 될 것입니다.

이때 Suspense 와 lazy 를 사용합니다.

const Login = lazy(() => import('./Login'));
const Home = lazy(() => import('./Home'));
const Channel = lazy(() => import('./Channel'));
const Meeting = lazy(() => import('./Meeting'));
const UserManagePage = lazy(() => import('./UserManagePage'));
const UserAuthPage = lazy(() => import('./UserAuthPage'));
const Join = lazy(() => import('./Join'));
const PrivateRoute = lazy(() => import('router/PrivateRoute'));
const Main = lazy(() => import('./Main'));
const EnterPriseTest = lazy(() => import('./EnterPriseTest'));
const DM = lazy(() => import('./DM'));

const AppRouter = () => {
  return (
    <>
      <HashRouter>
        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/login" element={<Login />} />
...

한번에 import를 하는 것이 아니고 필요할 때마다 import하는 것입니다.

Suspense의 fallback에는 import 되기 전까지 보여 줄 엘리먼트를 지정하면 됩니다.