inflearn logo
강의

Course

Instructor

Real-world web performance optimization for frontend developers (feat. React) - Part. 2

3-8) Removing unnecessary css

궁금한 점이 있습니다.

Resolved

263

s s

22 asked

1

불필요한 css를 purgecss로 제거하셨는데, 궁금한 점이 웹앱의 경우는 웹에서 사용하는 css는 앱에선 필요없고, 앱에서 사용하는 css는 웹에서는 필요없는데 이런것도 구별해서 제공을 해주는지 궁금합니다. 웹앱의 경우는 두개의 css를 다 갖고 있어서 불필요한 css를 줄일 수 있는지가 궁금합니다.

질문 react devtools

Answer 1

1

hackurity01

안녕하세요, s s님,

PC와 모바일 환경에 따른 CSS 포함 여부에 대해서 질문을 주셨는데요,

말씀하신 부분은 일반적인 반응형 웹 방식의 문제점이라고 할 수 있습니다.
기기 환경에 따라 각각의 스타일을 모두 보유하고 있어야 한다는 단점이죠.

그래서 일부 서비스들은 그 둘의 환경을 구분합니다.
(ex - https://www.naver.com   vs   https://m.naver.com)
그래야 말씀하신 것 처럼 당장의 기기 환경에서 필요없는 스타일을 구분해 낼 수 있으니까요. (단순 CSS 뿐만 아니라 JS도 마찬가지 입니다.)

만약 이렇게 이렇게 두 개의 환경을 구분하여 서비스하지 않고 반응형으로 서비스를 한다고 하더라도 환경에 따른 리소스를 구분해서 로드할 수는 있습니다. user agent나 클라이언트 단에서 기기의 가로 사이즈를 통해 판단할 수도 있겠죠.

중요한 건 말씀하신 것처럼 각 환경에 따라 스타일이나 기능이 다르다면 분명히 다른 환경에 대한 코드, 즉, 당장 필요없는 코드들이 포함되어 로드가 될 수 있다라는 것이고,
서비스의 특징, 환경에 따라 적절하게 타협을 하거나 다양한 기법들(PC와 모바일 사이트 분리, 환경에 따른 리소스 동적 로드 등)을 생각해볼 수 있을 것 같습니다.

그럼 답변이 도움되셨기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :)

예제 프로젝트 관련 질문입니다.

0

73

1

개발환경에 대한 안내

1

162

2

layout shift가 아주 약간 일어나는 부분에 대해

0

312

2

3-4) 이미지 사이즈 최적화 과정에서 img 태그 작동 안되는 문제

0

299

2

Material--icons_4.0.0.woff2

0

211

1

코드 실행 시 에러 관련 질문드립니다!!

1

581

1

npm run serve가 동작하지 않아요

0

705

1

lighthouse 측정에 관해 질문드려요

2

1008

1

webp 확장자질문

1

424

1

이미지 지연 로딩 질문 있습니다!

2

448

1

폰트 포멧에 대한 질문입니다.

1

390

2

궁금한 점이 있어요

1

350

1

css font-face unicode-range

1

360

1

woff2 포멧 IE에서 사용가능 여부

1

422

2

3-3 이미지 지연 로딩 코드 어디서 보나요?

1

328

1

img 태그가 작동이 되지 않습니다.

1

407

1

질문있습니다~

2

223

1

이미지 오류 요청 오류

1

399

1

안녕하세요~ 질문드립니다

1

305

1

궁금한점이 있습니다.

1

228

1

강의자료

1

207

2

안녕하세요 리액트 최적화 관련하여 질문드립니다.

2

1462

1

선생님 질문이 하나 있는데요~~

1

378

2

정말유익해요

2

217

1