[핀더펜] 성능 최적화

성능 최적화 후 결과 입니다.

pwa적용과 Performance, Accessibility 점수를 올린 점에 만족합니다.

 

그러나!!!!!! 지난 성능 최적화 이후 lighthouse를 실행하거나 새로침을 했을 때 화면이 blank white page로 나오는 문제가 발생했다...

 

그렇게 문제의 원인을 찾는 여정이 시작됐다.

 

예상 원인 1 - 코드 분할

지난 성능 최적화 작업에서 주된 작업이 코드분할이었기 때문에 가장 먼저 원인으로 떠올랐다.

그래서 코드 분할을 위한 lazy 코드를 모두 주석처리하고 기존의 방식대로 하나의 번들에 모든 컴포넌트 코드가 들어가도록 한 후 실행해봤다.

그 결과 진전 없음으로 원인이 아닌 것으로 판명됐다.

 

예상 원인 2 - 라이브러리 rollup

코드 분할과 함께 번들의 크기를 줄이기 위해 라이브러리를 분리하는 rollup을 함께 적용했다.

그래서 이 부분을 제거하고 실행해봤지만 이번에도 역시나 문제가 해결되지 않았다.

 

예상 원인 3 - 서비스 워커 경로

현재 프로젝트에서 사용하고 있는 서비스워커는 총 두개로 api mocking을 위한 mockServiceWorker와 pwa를 위한 pwaServiceWorker가 있다. 개발자 도구의 Application 탭에서 확인한 결과 새로고침할 때 서비스워커가 중복돼서 등록되거나 등록됐던 서비스 워커가 새로고침 후에는 실행되지 않는 문제가 있었다.

그래서 새로고침하면서 서비스 워커의 경로를 못찾는 건가? 라는 생각이 들어 이리저리 경로를 수정해봤지만 결론은 아니였다.

그래서 둘 중 어느 서비스 워커의 문제인지 하나씩 등록 코드를 지우고 확인해봐야겠다는 생각이 들었다. mockServiceworker를 지우고 나니 코드가 정상적으로 움직였다. 그래서 msw 관련 코드의 문제라고 생각이 들어 msw 버전을 1에서 2로 마이그레이션해 봤지만 해결되지 않았다.

그러다 혹시나하는 마음에 pwaServiceWorker등록을 지우고 mockServiceWorker만 등록해서 실행해봤다. 

결과는 문제 없음.....

너무 혼란스러웠다. 서비스 워커를 다중으로 등록하면 안되는 건가..?

구글링 결과 각 서비스 워커는 고유한 범위를 가져야 하며, 범위가 조금이라도 겹치는 순간 하나의 요청에 대한 중복 처리가 일어나 충돌이 생길 수 있고 동일한 리소스를 캐싱하려고 해서 리소스 낭비가 생길 수 있다고 한다.

 

결론적으로 pwa 서비스워커가 먼저 등록되고 mock 서비스 워커가 나중에 등록되면서 충돌이 일어났고 새로고침 후에 등록된 서비스워커의 상태를 active로 바꿔야 하는데 해당 서비스워커를 찾지 못하는 문제가 생긴 것이다. 특히, mock 서비스 워커를 등록하는 코드가 비동기로 작성되었기 때문에 그 다음 코드인 메인 컴포넌트를 그리는 작업을 하지 못해 빈 화면만 계속 나왔던 것이다.

// 문제의 비동기 코드
await worker.start({
	serviceWorker: {
		url: "/fin-the-pen-web/mockServiceWorker.js",
	},
	onUnhandledRequest: "bypass",
});

 

해결 방법: gitPages에 등록하는 화며은 데모버전으로 실제 서버가 구동되는 것이 아니기 때문에 api mocking이 반드시 필요한 상황이다. 따라서 데모 버전은 pwaServiceWorker를 제거하고 실제 배포 페이지에는 mockServiceWorker를 제거하는 방식으로 문제를 해결했다. 

 

 

그 외의 문제 - ESLint 경고

ESLint: Fast refresh only works when a file only export components. Move your component(s) to a separate file.(react-refresh/only-export-components)

코드분할을 위해 lazy구문을 쓴 곳에 발생한 경고문구 입니다.

이건 ESLisnt 규칙을 재정의해서 고침

// legacy
rules: {
    'react-refresh/only-export-components': 'warn',
    'react/react-in-jsx-scope': 'off',
}

// current
rules: {
    'react-refresh/only-export-components': 'off',
    'react/react-in-jsx-scope': 'off',
}