본문 바로가기

분류 전체보기321

웹 최적화 기법 - 코드 분할 (Splitting) 리액트의 SPA의 특성 상 모든 리액트 코드가 하나의 자바스크립트 파일로 번들링 되어 로드되므로 첫 페이지 진입 시 사용하지 않는 코드가 다소 포함되어 있다. 코드를 분할하고 → 하나의 번들 파일을 → 여러 개의 파일로 쪼개기 분할된 코드는 사용자가 서비스를 이용하는 도중 해당 코드가 필요할 때 로드되어 실행되게끔 지연로딩 처리 해준다. 코드 분할 후 컴포넌트 지연 로딩 동적 import 사용하기 import { add } from './math'; //X import('add').then((module) => { const { add } = module; //O }); 동적 import 의 경우에는 Promise 형태로 모듈을 반환하므로 사용이 용이하지 않는데, 리액트에선 해당 기능을 lazy와 Sus.. 2023. 7. 31.
Bundler (feat.vite) 번들러 개발자가 직접 처리해줘야할 일들을 대신 처리해주는 것 (transfiler) https://www.youtube.com/watch?v=UdTD_NAWxyE yarn create vite vite 로 만들어준 프로젝트에 yarn build 로 빌드해주면 나오는 dist 폴더를 확인해준다. assets 폴더에 존재하는 파일은 vite로 생성해준 프로젝트를 압축시킨 내용이므로 얼핏 보기에 알아보기 힘들다. 이러한 파일을 vite.config.js 파일의 build 안에 minify을 false로 설정하면 그나마 보기 좋게 바뀌는데 export default defineConfig({ plugins: [react()], esbuild: { jsxInject: `import React from 'react.. 2023. 7. 31.
웹 최적화 기법 - 이미지 사이즈 최적화 Properly size images 보통 이미지를 가공하지 않으면 지정된 크기 그대로 로딩된다. 그러므로 이미지 크기를 적당히 줄여줄 필요가 있는데, 보통 반응형을 고려하여 보여지는 이미지의 실제 크기에 2배 정도로 설정해준다. 이미지의 포맷 벡터 이미지 - SVG 비트맵 이미지 PNG 무손실 압축 방식, 원본을 훼손 없이 압축하며 알파 채널을 지원하는 이미지 포맷 png는 알파 채널을 지원하므로 배경 색을 투명하게 할 수 있음 JPG. JPEG 정보 손실이 발생하나 이미지를 좀더 작은 사이즈로 줄일 수 있음 투명도 정보가 필요하지 않거나 고화질이 아니어도 될 때 사용 WebP 무손실 압축과 손실 압축 둘다 제공하는 최신 이미지 포맷 브라우저 호환성 때문에 PNG, JPG 보다 나은 효율을 가지고 있더.. 2023. 7. 30.
웹 페이지 최적화 기법 - 폰트 최적화 폰트 최적화 커스텀 폰트를 사용하고자 한다면 성능 문제를 야기할 수 있다. 폰트의 변화로 인해 폰트 밀림, 깜박임 등이 발생하는데, FOUT (Flash Of Unstyled Text) 엣지 브라우저에서 폰트를 로드하는 방식 폰트의 다운로드 여부와 무관하게 먼저 텍스트를 보여준 다음 커스텀 폰트를 적용 FOIT (Flash Of Invisible Text) 크롬, 사파리, 파이어폭스 등에서 폰트를 로드하는 방식 폰트가 완전히 다운로드 되기 전까지 텍스트를 보여주지 않고 폰트 다운로드가 끝나면 커스텀 폰트를 보여준다. 단 크롬의 경우 FOIT 의 지속시간이 3초이며, 이후엔 FOUT 방식이 된다. 폰트 사용 시점 제어 서비스 및 컨텐츠의 특성에 따라 적절한 방식을 적용하며, font-style 속성을 사용.. 2023. 7. 27.

티스토리툴바