Joyful 개발 (14) 썸네일형 리스트형 [Webpack] file-loader와 url-loader 비교 차이점 정리 file-loader와 url-loader? 웹팩 설정 중 둘의 차이가 궁금해 알아보며 공부했던 내용을 정리해봅니다 file-loader The file-loader resolves import/require() on a file into a url and emits the file into the output directory. - 파일에 import/requrie 구문을 만들어주고, 파일을 output 폴더에 생성해주는 로더 → 파일 자체를 가져옴 url-loader A loader for webpack which transforms files into base64 URIs. ->The url-loader works like the file-loader, but can return a DataURL .. [최적화] lazy loading 레이지 로딩으로 로딩 속도를 개선해보자 지난 프로젝트 때 만들었던 에어비엔비 클론 사이트 날짜, 인원, 요금 범위를 지정해 원하는 조건의 숙소를 검색하는 기능을 가지고 있다. 처음 메인 화면에서 전체 숙소를 보여주는데, 서버에서 총 2999개의 숙소 데이터가 한번에 넘어온다. 3000개에 가까운 데이터가 한번에 화면에 나오니 당연하게도 로딩 속도가 굉장히 느렸다. Lazy Loading 적용 전 기나긴 로딩.. 중간에 잠깐 멈추는 듯 하더니 폭발적으로 request를 보낸다.. 총 3010개의 request를 보내고 데이터를 전부 로드하는데 42.11s가 걸렸다 내가 유저라도 이정도로 느린 사이트는 안 쓸 것 같다. 이대로는 안 되겠다. 사용자가 보는 첫화면의 이미지만 미리 로드하고 이후의 이미지는 나중에 로드하는 Lazy Loading(레이.. 이전 1 2 3 4 다음
