List

코드 최소화와 번들 정리

#웹가이드

Web Guide코드 최소화압축빌드
코드 최소화와 번들 정리
사람이 읽기 좋은 코드와 기계가 받기 좋은 코드는 다릅니다.
배포용은 따로 만들어야 합니다.
코드 최소화와 번들 정리 관련 사진
01최소화 란
기능은 그대로 두고 용량만 줄입니다.
01
공백 제거
줄바꿈과 들여쓰기를 없앱니다.
02
주석 제거
설명문은 배포본에서 뺍니다.
03
이름 줄이기
내부 변수명을 짧게.
04
중복 정리
같은 값을 합칩니다.
05
안 쓰는 코드 제거
호출되지 않는 부분 삭제.
06
용량 감소
상당한 비율로 줄어듭니다.
02파일 합치기와 나누기
무조건 합치는 것이 답은 아닙니다.
합치기
요청 수 감소 · 예전에는 중요했음 · 한 곳만 바꿔도 전체 재다운로드
나누기
페이지별 필요한 것만 · 바뀐 부분만 다시 받음 · 최신 환경에서 유리
03안 쓰는 코드 정리
가장 큰 절감 효과가 있습니다.
미사용 스타일
안 쓰는 규칙을 제거.
미사용 함수
호출 안 되는 코드 삭제.
전체 라이브러리
일부만 쓰면 일부만 가져옵니다.
구버전 대응 코드
지원 범위를 줄이면 빠집니다.
중복 라이브러리
같은 기능이 여러 개.
테스트 코드
배포본에 포함되지 않게.
04운영 주의
자동화하고 원본을 지켜야 합니다.
원본 보관
수정은 원본에서 합니다.
자동 생성
배포 과정에서 자동 처리.
디버깅 대응
원본 대응 정보를 남깁니다.
캐시 갱신
파일명에 버전 표시.
기능 확인
최소화 후 동작 검증.
전후 측정
용량 감소를 확인.
CHECK POINT
□  배포용 코드가 최소화되어 있는가
□  원본 코드를 따로 보관하는가
□  최소화가 자동으로 이뤄지는가
□  안 쓰는 스타일과 코드를 제거했는가
□  라이브러리를 통째로 넣지 않았는가
□  중복 라이브러리가 없는가
□  파일명에 버전이 표시되는가
□  최소화 후 기능을 검증했는가
배포용 코드는 원본과 별도로 자동 생성되어야 합니다.
안 쓰는 코드 제거가 최소화보다 절감 효과가 큰 경우가 많습니다.
#코드 최소화#압축#빌드#미사용 코드#번들#캐시#성능#반응형#웹비스타#홈페이지 제작
목록보기