간단한 프로파일링 예시 코드 💻

가장 기본적인 방법으로, console.time()과 console.timeEnd()를 사용해 함수 실행 시간을 측정할 수 있어:

// 간단한 성능 측정 예시
function findPrimes(max) {
  console.time('findPrimes');
  
  const primes = [];
  for (let i = 2; i <= max; i++) {
    let isPrime = true;
    for (let j = 2; j < i; j++) {
      if (i % j === 0) {
        isPrime = false;
        break;
      }
    }
    if (isPrime) primes.push(i);
  }
  
  console.timeEnd('findPrimes');
  return primes;
}

findPrimes(10000); // 콘솔에 실행 시간이 출력됨

메모리 누수 예시 코드 🚰

// 메모리 누수가 발생하는 코드
const leakyData = [];

function addData() {
  // 대량의 데이터를 생성하고 저장
  const largeObject = {
    date: new Date(),
    data: new Array(1000000).fill('🔥')
  };
  
  // leakyData 배열에 계속 추가만 하고 제거하지 않음
  leakyData.push(largeObject);
}

// 주기적으로 호출되면 메모리가 계속 증가함
setInterval(addData, 1000);

메모리 누수 예시와 해결책 💡

// 문제가 있는 코드: 이벤트 리스너 누수
function setupButton() {
  const button = document.getElementById('myButton');
  
  // 이벤트 리스너가 계속 추가됨
  button.addEventListener('click', function() {
    console.log('Button clicked!');
    // 큰 데이터를 참조하는 클로저
    processLargeData(largeDataArray);
  });
}

// 페이지에서 여러 번 호출되는 함수
function refreshUI() {
  // 기존 버튼 제거 후 새로운 버튼 추가
  const container = document.getElementById('container');
  container.innerHTML = '<button id="myButton">Click Me</button>';
  
  // 버튼 설정 (이벤트 리스너 추가)
  setupButton();
}

// 수정된 코드: 이벤트 리스너 정리
function setupButton() {
  const button = document.getElementById('myButton');
  
  // 이벤트 핸들러를 변수에 저장
  const clickHandler = function() {
    console.log('Button clicked!');
    processLargeData(largeDataArray);
  };
  
  // 이벤트 리스너 추가
  button.addEventListener('click', clickHandler);
  
  // 나중에 정리할 수 있도록 핸들러 반환
  return clickHandler;
}

let currentHandler = null;

function refreshUI() {
  const container = document.getElementById('container');
  const button = document.getElementById('myButton');
  
  // 기존 이벤트 리스너 제거
  if (button && currentHandler) {
    button.removeEventListener('click', currentHandler);
  }
  
  container.innerHTML = '<button id="myButton">Click Me</button>';
  
  // 새 핸들러 저장
  currentHandler = setupButton();
}

// Map을 사용한 경우 (메모리 누수 가능성)
const cache = new Map();

function processNode(node) {
  if (cache.has(node)) {
    return cache.get(node);
  }
  
  const result = expensiveComputation(node);
  cache.set(node, result);
  return result;
}

// WeakMap을 사용한 경우 (메모리 누수 방지)
const cache = new WeakMap();

function processNode(node) {
  if (cache.has(node)) {
    return cache.get(node);
  }
  
  const result = expensiveComputation(node);
  cache.set(node, result);
  return result;
}

React에서 메모리 누수 방지 예시

// 함수형 컴포넌트에서 정리
import React, { useEffect } from 'react';

function DataComponent() {
  useEffect(() => {
    // 데이터 구독 설정
    const subscription = dataSource.subscribe();
    
    // 정리 함수 반환
    return () => {
      // 컴포넌트 언마운트 시 구독 취소
      subscription.unsubscribe();
    };
  }, []); // 빈 의존성 배열: 마운트와 언마운트 시에만 실행
  
  return <div>Data Component</div>;
}

CPU 병목 예시와 최적화 💡

// 비효율적인 코드 (O(n²) 시간 복잡도)
function findDuplicates(array) {
  const duplicates = [];
  
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length; j++) {
      // 같은 요소지만 다른 인덱스인 경우
      if (i !== j && array[i] === array[j] && !duplicates.includes(array[i])) {
        duplicates.push(array[i]);
      }
    }
  }
  
  return duplicates;
}

// 최적화된 코드 (O(n) 시간 복잡도)
function findDuplicatesOptimized(array) {
  const seen = new Set();
  const duplicates = new Set();
  
  for (const item of array) {
    if (seen.has(item)) {
      duplicates.add(item);
    } else {
      seen.add(item);
    }
  }
  
  return [...duplicates];
}

// 메모이제이션 없는 피보나치 함수
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 메모이제이션을 적용한 피보나치 함수
function fibonacciMemoized(n, memo = {}) {
  if (n in memo) return memo[n];
  if (n <= 1) return n;
  
  memo[n] = fibonacciMemoized(n - 1, memo) + fibonacciMemoized(n - 2, memo);
  return memo[n];
}

Web Worker 사용 예시

// main.js
const worker = new Worker('worker.js');

// 작업 요청
worker.postMessage({
  action: 'processData',
  data: largeDataArray
});

// 결과 받기
worker.onmessage = function(e) {
  const result = e.data;
  updateUI(result);
};

// worker.js
self.onmessage = function(e) {
  if (e.data.action === 'processData') {
    const result = processLargeData(e.data.data);
    self.postMessage(result);
  }
};

function processLargeData(data) {
  // 시간이 많이 걸리는 계산 수행
  // ...
  return processedData;
}

// 큰 데이터셋을 청크로 나누어 처리
function processLargeDataSet(data, chunkSize = 1000) {
  let index = 0;
  
  function processChunk() {
    const chunk = data.slice(index, index + chunkSize);
    index += chunkSize;
    
    // 청크 처리
    for (const item of chunk) {
      // 처리 로직
    }
    
    // 더 처리할 데이터가 있으면 다음 프레임에 스케줄
    if (index < data.length) {
      requestAnimationFrame(processChunk);
    } else {
      console.log('Processing complete!');
    }
  }
  
  // 첫 번째 청크 처리 시작
  requestAnimationFrame(processChunk);
}

레이아웃 스래싱 예시와 해결책

// 나쁜 예: 레이아웃 스래싱 발생
function resizeAllBoxes() {
  const boxes = document.querySelectorAll('.box');
  
  for (const box of boxes) {
    const width = box.offsetWidth; // 레이아웃 읽기
    box.style.width = (width * 2) + 'px'; // 레이아웃 쓰기
    const height = box.offsetHeight; // 다시 레이아웃 읽기 (강제 레이아웃 발생)
    box.style.height = (height * 2) + 'px'; // 다시 레이아웃 쓰기
  }
}

// 좋은 예: 읽기와 쓰기 작업 분리
function resizeAllBoxesOptimized() {
  const boxes = document.querySelectorAll('.box');
  const dimensions = [];
  
  // 모든 읽기 작업 먼저 수행
  for (const box of boxes) {
    dimensions.push({
      width: box.offsetWidth,
      height: box.offsetHeight
    });
  }
  
  // 그 다음 모든 쓰기 작업 수행
  for (let i = 0; i < boxes.length; i++) {
    const box = boxes[i];
    const dim = dimensions[i];
    box.style.width = (dim.width * 2) + 'px';
    box.style.height = (dim.height * 2) + 'px';
  }
}

/* 애니메이션이 적용될 요소에 will-change 사용 */
.animated-element {
  will-change: transform, opacity;
}

/* 하지만 남용하지 말 것! */

/* 나쁜 예: 레이아웃과 페인트를 발생시킴 */
.box {
  position: absolute;
  left: 0;
  top: 0;
  transition: left 0.3s, top 0.3s;
}
.box:hover {
  left: 100px;
  top: 100px;
}

/* 좋은 예: GPU 가속 활용 */
.box {
  transform: translate(0, 0);
  transition: transform 0.3s;
}
.box:hover {
  transform: translate(100px, 100px);
}

간단한 가상 스크롤 구현 예시

class VirtualScroller {
  constructor(options) {
    this.container = options.container;
    this.itemHeight = options.itemHeight;
    this.totalItems = options.totalItems;
    this.renderItem = options.renderItem;
    this.visibleItems = Math.ceil(this.container.clientHeight / this.itemHeight) + 2;
    
    this.scrollContainer = document.createElement('div');
    this.scrollContainer.style.height = `${this.totalItems * this.itemHeight}px`;
    this.scrollContainer.style.position = 'relative';
    this.container.appendChild(this.scrollContainer);
    
    this.items = [];
    this.lastScrollTop = 0;
    
    this.container.addEventListener('scroll', this.onScroll.bind(this));
    this.render();
  }
  
  onScroll() {
    const scrollTop = this.container.scrollTop;
    if (Math.abs(scrollTop - this.lastScrollTop) > (this.itemHeight / 2)) {
      this.lastScrollTop = scrollTop;
      this.render();
    }
  }
  
  render() {
    const startIndex = Math.floor(this.lastScrollTop / this.itemHeight);
    const endIndex = Math.min(startIndex + this.visibleItems, this.totalItems);
    
    // 현재 보이는 범위 밖의 아이템 제거
    this.items.forEach(item => {
      if (item.index < startIndex || item.index >= endIndex) {
        this.scrollContainer.removeChild(item.element);
      }
    });
    
    this.items = this.items.filter(item => 
      item.index >= startIndex && item.index < endIndex
    );
    
    // 새 아이템 추가
    for (let i = startIndex; i < endIndex; i++) {
      if (!this.items.some(item => item.index === i)) {
        const element = this.renderItem(i);
        element.style.position = 'absolute';
        element.style.top = `${i * this.itemHeight}px`;
        element.style.height = `${this.itemHeight}px`;
        element.style.width = '100%';
        
        this.scrollContainer.appendChild(element);
        this.items.push({ index: i, element });
      }
    }
  }
}

/* CSS 애니메이션 예시 */
@keyframes slide-in {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

.animated {
  animation: slide-in 0.5s ease-out;
}

// JavaScript 애니메이션 예시 (requestAnimationFrame 사용)
function animateElement(element, duration) {
  const start = performance.now();
  
  function step(timestamp) {
    const elapsed = timestamp - start;
    const progress = Math.min(elapsed / duration, 1);
    
    // -100%에서 0%로 이동
    const translateX = -100 + progress * 100;
    element.style.transform = `translateX(${translateX}%)`;
    
    if (progress < 1) {
      requestAnimationFrame(step);
    }
  }
  
  requestAnimationFrame(step);
}

Webpack을 사용한 코드 스플리팅 예시

// 동적 임포트를 사용한 코드 스플리팅
function loadProfilePage() {
  // 프로필 페이지로 이동할 때만 관련 코드를 로드
  import('./profile.js')
    .then(module => {
      // 모듈 로드 완료 후 실행
      module.initProfilePage();
    })
    .catch(error => {
      console.error('프로필 페이지 로딩 실패:', error);
    });
}

// React에서의 코드 스플리팅 (React.lazy 사용)
import React, { Suspense, lazy } from 'react';

// 컴포넌트를 동적으로 임포트
const ProfilePage = lazy(() => import('./ProfilePage'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <ProfilePage />
      </Suspense>
    </div>
  );
}

서버 응답 헤더 설정 예시

// Express.js에서 정적 파일의 캐시 헤더 설정
app.use(express.static('public', {
  maxAge: '1y', // 1년 동안 캐시 유효
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // HTML 파일은 캐시하지 않음
      res.setHeader('Cache-Control', 'no-cache');
    } else if (path.includes('chunk')) {
      // 청크 파일에 장기 캐싱 적용 (콘텐츠 해시가 포함된 파일명)
      res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
    }
  }
}));

기본적인 Service Worker 구현

// service-worker.js
const CACHE_NAME = 'my-site-cache-v1';
const urlsToCache = [
  '/',
  '/styles/main.css',
  '/scripts/main.js',
  '/images/logo.png'
];

// 설치 단계: 리소스 캐싱
self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then(cache => {
        return cache.addAll(urlsToCache);
      })
  );
});

// 요청 가로채기
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // 캐시에서 찾으면 반환
        if (response) {
          return response;
        }
        
        // 캐시에 없으면 네트워크 요청
        return fetch(event.request).then(response => {
          // 유효한 응답인지 확인
          if (!response || response.status !== 200 || response.type !== 'basic') {
            return response;
          }
          
          // 응답 복제 (스트림은 한 번만 사용 가능)
          const responseToCache = response.clone();
          
          // 응답을 캐시에 저장
          caches.open(CACHE_NAME).then(cache => {
            cache.put(event.request, responseToCache);
          });
          
          return response;
        });
      })
  );
});

React Query를 사용한 데이터 캐싱 예시

import { useQuery, QueryClient, QueryClientProvider } from 'react-query';

// QueryClient 생성
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5분 동안 데이터를 "신선"하게 유지
      cacheTime: 30 * 60 * 1000, // 30분 동안 캐시 유지
    },
  },
});

// 데이터 가져오기 훅
function useTalentData(talentId) {
  return useQuery(['talent', talentId], async () => {
    const response = await fetch(`/api/talents/${talentId}`);
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  });
}

// 컴포넌트에서 사용
function TalentDetail({ talentId }) {
  const { data, isLoading, error } = useTalentData(talentId);
  
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
      {/* 나머지 UI */}
    </div>
  );
}

이미지 지연 로딩 예시

// 모던 브라우저에서는 loading="lazy" 속성 사용
<img src="image.jpg" loading="lazy" alt="Description">

// JavaScript로 구현한 지연 로딩
document.addEventListener('DOMContentLoaded', () => {
  const lazyImages = document.querySelectorAll('img.lazy');
  
  if ('IntersectionObserver' in window) {
    const imageObserver = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const image = entry.target;
          image.src = image.dataset.src;
          image.classList.remove('lazy');
          imageObserver.unobserve(image);
        }
      });
    });
    
    lazyImages.forEach(image => imageObserver.observe(image));
  } else {
    // IntersectionObserver를 지원하지 않는 브라우저용 폴백
    // ...
  }
});

스크롤 이벤트 최적화 코드

// 최적화 전: 스크롤마다 실행됨
window.addEventListener('scroll', function() {
  checkForNewContent();
});

// 최적화 후: 디바운싱 적용
function debounce(func, wait) {
  let timeout;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(context, args), wait);
  };
}

window.addEventListener('scroll', debounce(function() {
  checkForNewContent();
}, 200));

차트 컴포넌트 동적 로딩 예시

// 최적화 전: 모든 차트를 한 번에 임포트
import BarChart from './charts/BarChart';
import LineChart from './charts/LineChart';
import PieChart from './charts/PieChart';
import RadarChart from './charts/RadarChart';
import ScatterChart from './charts/ScatterChart';

// 최적화 후: 필요한 차트만 동적으로 임포트
const ChartLoader = ({ type, data, ...props }) => {
  const [ChartComponent, setChartComponent] = useState(null);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    setLoading(true);
    
    // 필요한 차트 컴포넌트만 동적으로 로드
    import(`./charts/${type}Chart`)
      .then(module => {
        setChartComponent(() => module.default);
        setLoading(false);
      })
      .catch(error => {
        console.error(`Failed to load ${type}Chart:`, error);
        setLoading(false);
      });
  }, [type]);
  
  if (loading) return <div>Loading chart...</div>;
  if (!ChartComponent) return <div>Chart not available</div>;
  
  return <ChartComponent data={data} {...props} />;
};

입력 처리 최적화 코드

// 최적화 전: 모든 입력마다 API 호출
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  // 입력할 때마다 API 호출
  useEffect(() => {
    fetchSearchResults(query).then(data => {
      setResults(data);
    });
  }, [query]);
  
  return (
    <div>
      <input 
        type="text" 
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <ResultsList results={results} />
    </div>
  );
}

// 최적화 후: 디바운싱 적용
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  
  // useDebounce 커스텀 훅 사용
  const debouncedQuery = useDebounce(query, 500);
  
  // 디바운스된 쿼리가 변경될 때만 API 호출
  useEffect(() => {
    if (debouncedQuery) {
      fetchSearchResults(debouncedQuery).then(data => {
        setResults(data);
      });
    }
  }, [debouncedQuery]);
  
  return (
    <div>
      <input 
        type="text" 
        value={query}
        onChange={e => setQuery(e.target.value)}
      />
      <ResultsList results={results} />
    </div>
  );
}

// 디바운스 커스텀 훅
function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);
  
  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);
    
    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);
  
  return debouncedValue;
}

메모리 누수 해결 코드

// React 컴포넌트에서 메모리 누수 해결
function DataMonitor({ sourceId }) {
  const [data, setData] = useState([]);
  
  useEffect(() => {
    // 데이터 소스 구독
    const subscription = dataSource.subscribe(sourceId, newData => {
      setData(prevData => [...prevData, newData]);
    });
    
    // 주기적인 데이터 정리
    const cleanupInterval = setInterval(() => {
      setData(prevData => {
        // 오래된 데이터 제거
        if (prevData.length > 100) {
          return prevData.slice(-100);
        }
        return prevData;
      });
    }, 60000);
    
    // 정리 함수
    return () => {
      // 구독 취소
      subscription.unsubscribe();
      // 타이머 정리
      clearInterval(cleanupInterval);
    };
  }, [sourceId]);
  
  return (
    <div>
      <h2>Data Monitor: {sourceId}</h2>
      <DataChart data={data} />
    </div>
  );
}

효율적인 코드 작성 예시

// 비효율적인 코드: O(n²) 시간 복잡도
function hasDuplicates(array) {
  for (let i = 0; i < array.length; i++) {
    for (let j = 0; j < array.length; j++) {
      if (i !== j && array[i] === array[j]) {
        return true;
      }
    }
  }
  return false;
}

// 효율적인 코드: O(n) 시간 복잡도
function hasDuplicatesOptimized(array) {
  const seen = new Set();
  for (const item of array) {
    if (seen.has(item)) {
      return true;
    }
    seen.add(item);
  }
  return false;
}

효율적인 DOM 조작 예시

// 비효율적인 DOM 조작
function addItems(items) {
  const list = document.getElementById('itemList');
  
  items.forEach(item => {
    list.innerHTML += `<li>${item}</li>`; // 매번 전체 HTML을 다시 파싱
  });
}

// 효율적인 DOM 조작
function addItemsOptimized(items) {
  const list = document.getElementById('itemList');
  const fragment = document.createDocumentFragment();
  
  items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    fragment.appendChild(li);
  });
  
  list.appendChild(fragment); // 한 번만 DOM에 접근
}

이벤트 위임 예시

// 비효율적인 방법: 각 버튼마다 이벤트 리스너 등록
document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', function(e) {
    console.log('Button clicked:', this.textContent);
  });
});

// 효율적인 방법: 이벤트 위임 사용
document.querySelector('.button-container').addEventListener('click', function(e) {
  if (e.target.matches('.button')) {
    console.log('Button clicked:', e.target.textContent);
  }
});

효율적인 비동기 처리 예시

// 비효율적인 방법: 순차적 API 호출
async function fetchUserData(userId) {
  const user = await fetchUser(userId);
  const posts = await fetchPosts(userId);
  const followers = await fetchFollowers(userId);
  
  return { user, posts, followers };
}

// 효율적인 방법: 병렬 API 호출
async function fetchUserDataOptimized(userId) {
  // 세 요청을 병렬로 시작
  const userPromise = fetchUser(userId);
  const postsPromise = fetchPosts(userId);
  const followersPromise = fetchFollowers(userId);
  
  // 모든 결과 기다리기
  const [user, posts, followers] = await Promise.all([
    userPromise, postsPromise, followersPromise
  ]);
  
  return { user, posts, followers };
}

Lighthouse CI 설정 예시

// lighthouserc.js
module.exports = {
  ci: {
    collect: {
      // 테스트할 URL
      url: ['https://www.jaenung.net/', 'https://www.jaenung.net/talents'],
      // 설정
      numberOfRuns: 3,
      settings: {
        // 모바일 에뮬레이션
        preset: 'mobile',
      },
    },
    assert: {
      // 성능 예산 설정
      assertions: {
        'categories:performance': ['error', {minScore: 0.8}],
        'first-contentful-paint': ['error', {maxNumericValue: 2000}],
        'interactive': ['error', {maxNumericValue: 3500}],
        'max-potential-fid': ['error', {maxNumericValue: 100}],
      },
    },
    upload: {
      // 결과 저장 방법
      target: 'temporary-public-storage',
    },
  },
};

Puppeteer로 성능 프로파일 수집하기

const puppeteer = require('puppeteer');
const fs = require('fs').promises;

async function collectPerformanceMetrics() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // CPU 프로파일링 시작
  await page.tracing.start({ 
    path: 'profile.json',
    categories: ['devtools.timeline']
  });
  
  // 페이지 로드 및 상호작용
  await page.goto('https://www.jaenung.net');
  await page.waitForSelector('.talent-card');
  await page.click('.talent-card');
  await page.waitForTimeout(2000);
  
  // 프로파일링 중지
  await page.tracing.stop();
  
  // 성능 메트릭 수집
  const metrics = await page.evaluate(() => JSON.stringify(window.performance));
  await fs.writeFile('metrics.json', metrics);
  
  // 메모리 힙 스냅샷 생성
  const client = await page.target().createCDPSession();
  await client.send('HeapProfiler.enable');
  const { profile } = await client.send('HeapProfiler.takeHeapSnapshot', {
    reportProgress: false
  });
  await fs.writeFile('heap.heapsnapshot', JSON.stringify(profile));
  
  await browser.close();
  
  console.log('Performance data collected!');
}

collectPerformanceMetrics().catch(console.error);

Web Vitals 측정 코드 예시

import { getCLS, getFID, getLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  // 분석 서비스로 데이터 전송
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    id: metric.id,
    page: location.pathname,
    userAgent: navigator.userAgent
  });
  
  // 비동기 API 호출
  navigator.sendBeacon('/analytics', body);
}

// Core Web Vitals 측정
getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

GitHub Actions를 활용한 성능 테스트 워크플로우

# .github/workflows/performance.yml
name: Performance Testing

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm ci
      - name: Build project
        run: npm run build
      - name: Start server
        run: npm run serve &
      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v8
        with:
          configPath: './lighthouserc.js'
          uploadArtifacts: true
          temporaryPublicStorage: true
      
  bundle-analysis:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Use Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '16'
      - name: Install dependencies
        run: npm ci
      - name: Build with bundle analysis
        run: npm run build:analyze
      - name: Check bundle size
        run: node scripts/check-bundle-size.js
      - name: Upload bundle stats
        uses: actions/upload-artifact@v2
        with:
          name: bundle-stats
          path: ./bundle-stats.json