JS 실행시간 최적화: 브라우저 파싱·컴파일·실행 시간을 줄이는 3가지 전략
웹 서비스의 성능을 논할 때 가장 중요하게 다뤄야 할 지표 중 하나가 바로 JS 실행시간(JS execution time)이다.
브라우저는 우리가 작성한 JavaScript를 파싱 → 컴파일 → 실행하는 복잡한 단계를 거치는데, 이 과정이 길어질수록 사용자 경험은 느려지고 인터랙션은 끊기기 시작한다.
✍️ webpack-bundle-analyzer — 번들을 시각적으로 분석하기
이 도구는 프로젝트의 JS 번들 크기를 시각화해주는 대표적인 분석 툴이다.
실제로 웹 서비스 성능 문제의 상당수는 “번들이 너무 크다”로부터 시작된다.
이를 해결하려면 무엇이 큰지 먼저 알아야 한다.
✔️ 설치
npm install --save-dev webpack-bundle-analyzer✔️ Webpack 설정에 추가
// webpack.config.js
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin({
analyzerMode: "server",
openAnalyzer: true,
}),
],
};✔️ 번들 분석 화면 예시
이 화면을 통해 다음과 같은 의사결정을 할 수 있다.
- lodash 전체를 import하고 있어 tree-shaking이 안 되고 있네 → 부분 import로 변경
- moment.js가 너무 크네 → dayjs로 교체
- React-Query devtools가 production에도 포함되네 → 조건부 로딩 필요
- initial chunk가 너무 커서 FCP(First Contentful Paint)에 악영향 → dynamic import 적용
✔️ Dynamic Import (Code Splitting) 적용 예시
// Before
import HeavyModal from "./HeavyModal";
// After
const HeavyModal = React.lazy(() => import("./HeavyModal"));코드 분할을 통해 최초 렌더링에 필요한 JS 크기를 큰 폭으로 줄일 수 있다.
✍️ CSS 최적화 — 렌더링 비용 줄이기
JS 실행시간 최적화라고 해서 JS만 줄이면 되는 것이 아니다.
CSS도 브라우저의 렌더링 성능에 큰 영향을 준다.
불필요한 CSS는 JS처럼 파싱하고 적용하는 데 시간이 소요되기 때문이다.
✔️ 1. 사용되지 않는 CSS 제거 (Unused CSS purge)
Tailwind, Next.js, CRA 등 많은 프레임워크가 기본적으로 지원하지만 직접 PurgeCSS를 적용할 수도 있다.
npm install @fullhuman/postcss-purgecss// postcss.config.js
module.exports = {
plugins: [
require("@fullhuman/postcss-purgecss")({
content: ["./src/**/*.jsx", "./public/index.html"],
defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
}),
],
};✔️ 2. Critical CSS 추출
Critical CSS는 “초기 렌더링에 필요한 최소한의 CSS만 inline으로 넣는 방법”이다.
Next.js는 이를 자동으로 처리해주지만, 직접 적용하려면:
<style>
/* critical CSS inserted here */
</style>
<link rel="stylesheet" href="main.css" />이렇게 하면 초기 렌더링 속도가 크게 향상된다.
✔️ 3. CSS 파일 분할 로딩
React + Webpack 환경에서 CSS도 JS처럼 Split 가능하다.
// webpack.config.js
{
test: /\.css$/,
use: [MiniCssExtractPlugin.loader, "css-loader"],
}파일이 분리되면 JS 실행시간도 줄고 렌더링 지연도 감소한다.
✔️ CSS 최적화 결과 예시
위처럼 CSS blocking time이 줄어들면 JS도 함께 빠르게 실행된다.
✍️ React Compiler — 렌더링과 JS 실행량을 획기적으로 줄여주는 최신 기술
React 팀이 공개한 React Compiler는 현재(2025년 기준) 가장 효율적인 렌더링 최적화 도구다.
✔️ React Compiler가 하는 일
- React.memo를 자동으로 적용
- useCallback/useMemo 없이도 안정적인 렌더링
- 불필요한 리렌더링 제거
- JS 실행량 자체를 감소시킴
즉, 기존에는 개발자가 직접 최적화를 해줘야 했던 부분을 자동화해준다.
✔️ React Compiler 적용 예시 (Next.js 15 기준)
// next.config.js
module.exports = {
reactCompiler: true,
};혹은 React 19 환경에서:
"use client";
import { compiler } from "react-compiler";✔️ React Compiler 사용 전/후 렌더링 비교
React Compiler가 활성화되면 다음과 같은 효과가 있다:
- JS 실행 시간 감소
- Virtual DOM 업데이트 비용 감소
- 컴포넌트 rerender 횟수 감소
- 이벤트 핸들러/콜백의 메모리 사용량 감소
특히 많은 상태와 props가 오가는 대규모 SPA에서 체감 속도 차이가 크다.
