1. Bundle-analyzer
bundle 사이즈를 볼수있는 라이브러리(사이트)
사용법
설치
npm i webpack-bundle-analyzer실행
npx cra-bundle-analyzer👉 build 폴더에 report.html 파일이 생성된것을 확인 할수 있습니다.
😨 현재 bundle을 이미지로 볼수 있습니다.
2. @loadable/component
code splliting을 해주는 라이브러리(사이트)
사용법
설치
npm i @loadable/component
문제발생]현재 typescript를 이용하다 보니까 에러가 발생했습니다.
TS7016: Could not find a declaration file for module '@loadable/component'.
'Front/node_modules/@loadable/component/dist/loadable.cjs.js' implicitly has an 'any' type.
Try `npm i --save-dev @types/loadable__component`
if it exists or add a new declaration (.d.ts) file containing `declare module '@loadable/component';`typscript를 사용하다보니 생기는 문제
type 지원해주는 라이브러리를 설치
설치
npm i —save-dev @types/loadable__component
route에 적용
import {createBrowserRouter} from 'react-router-dom'
import loadable from '@loadable/component'
// code splitting
const Example = loadable(() => import('../pages/example’))
export default createBrowserRouter([
path: ‘/‘,
Element: <Example />
])code splitting 적용 변화
😨 수정 전
😄 수정 후
3. 성능점수 변화
😨 수정 전
😄 수정 후
🧐 느낌점
다양한 방법으로 사이트를 최적화 시키는 방법이 있을것입니다.
현재 사이트 성능 점수가 70점대이지만 프로젝트를 마무리하기 전까지 90점대를 목표로 성능 최적화에 대해서 깊게 공부하고
더 알아가도록 하겠습니다.
간단한 번들 이미지를 통해서 현재 번들사이즈들을 볼수있었고 loadable을 통해서 코드 분할만 진행을 했는데 성능점수가 10점가량이 오른걸 볼수 있었습니다.
이 10점 가량으로 사용자가 1초라도 빠르게 페이지를 볼 수 있다면 100명이 모이면 100초의 차이를 보이기 때문에 크차이는
사용자 수가 많을수록 벌어질거라 생각이 듭니다.
frontEnd Developer