Feat/lazyloading #20
Feat/lazyloading #20
Conversation
Fast refresh only works when a file only exports components. Use a new file to share constants or functions between components 경고를 수정함
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
#18 리뷰 후 머지 되면, 받고 자체적으로 머지후 다시 pr 걸겠습니다. 우선 괜찮은 변경인지 검토 부탁드립니다. |
|
찾아보니 lazy로 로드할때 장점이 많네요. 굳굳 |
| if (module.includes("react")) { | ||
| return "react-vendor"; | ||
| } |
There was a problem hiding this comment.
번들링 최적화를 수행했습니다.
과도한 번들링은 오히려 오버헤드를 유발할 수 있을 거 같아, react 관련 라이브러리는 한데 모았습니다.
구현이 어렵지도 않았고, 용량이 그리 크지도 않아 따로 비교는 하지 않았습니다.
There was a problem hiding this comment.
나머지 모듈들은 따로 분리되어 필요할 때 import 됩니다.
| @@ -27,7 +22,7 @@ export const vars = createGlobalTheme("#root", { | |||
| white: "#FFFFFF", | |||
| }, | |||
| font: { | |||
| pretendardRegular, | |||
| pretendardRegular: "pretendard, sans-serif", // for debug: ,Courier New", // <-독특함 | |||
There was a problem hiding this comment.
폰트 import 최적화를 수행했습니다.
- 기존 폰트가 1.1메가로 너무 무거워 이를 서브셋 폰트로 적용했습니다.
- 카톡방에 충분히 공유된 사항이어서 별도 이슈는 작성하지 않았습니다.
- 본 브런치의 목적과 크게 다르지 않아 한 번에 포함했습니다.
src/index.css에 의존합니다
| @@ -0,0 +1,2 @@ | |||
| @import url("https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css"); | |||
There was a problem hiding this comment.
css 초기화 로직인데 그냥 가져왔습니다.
중복 여부 및 수정 방안 제시 부탁드립니다. @dandamdandam
There was a problem hiding this comment.
이전에 작성해둔 건데, index.css에서 관리하는게 더 좋아보입니다. index.html에 위 코드 삭제해주세요!
|
그리고 이전 PR에서 말하려고 했는데 지금 닫혀서.. |
|
그 부분 디자인 팀 한분이랑 어제 예기하는데 별 지적 없어서 넘겼었습니다. 헤더 전반적으로 수정하면서 디자인 팀이랑 얘기 해볼게요 |
관련 Issue
PR 설명
라우팅 요소를 기준으로 lazy 로딩을 적용했습니다.
폰트 최적화, 번들링 최적화도 같이 수정했으며, 아래에 코드와 함께 자세한 사항을 적어 놓았습니다.
기타 사항
#18 먼저 pr 부탁드립니다.모든 항목에 대해 자체적인 테스트는 완료했습니다.