# babelrc

3개의 포스트
post-thumbnail

[최적화] 트리쉐이킹(Tree Shaking)

트리 쉐이킹 나무를 흔들어 잔가지를 털어내듯 불필요한 코드를 제거하는 것 자바스크립트 트리쉐이킹 하는 이유 1) JavaScript 파일 크기 / 요청 횟수 증가 과거 HTML 위주의 단순한 웹 페이지와는 비교도 안 될 정도로 규모 있고 화려한 인터랙션을 자랑하는 웹 애플리케이션들이 증가 (참고: http archive) 2) JavaScript 파일의 실행 시간 자바스크립트는 코드 실행까지 거쳐야 하는 과정이 많음 (다운로드 - 압축 해제 - JS 코드 파싱해서 DOM 트리 생성 - 컴파일 - 실행) 다른 리소스에 비해 상대적으로 많은 시간을 소모 파일의 크기가 커진 만큼, 파일의 실행 시간 또한 증가 JavaScript 트리쉐이킹 웹팩 4버전 이상을 사용하는 경우에는 ES6 모듈(import, exp

2022년 12월 5일
·
0개의 댓글
·
post-thumbnail

parcel 기초 세팅

오늘은 웹 어플리케이션 번들러 3대장webpack, rollup, parcel중 하나인 parcel의 세팅 방법에 대해 알아보겠습니다. 물론 알아볼 것도 없이 parcel 홈페이지가 워낙 번역이 잘되어 있긴 합니다 ㅎㅎ;; 그래도 세팅이 어려운 분들을 위해 작성해봅니다. 시작하기 먼저 parcel을 실행하려면 parcel을 설치해야겠죠? Yarn: yarn global add parcel-bundler npm: npm install -g parcel-bundler 그 다음 yarn init -y npm init -y 그런 다음 index.html 실행 parcel index.html 이런식으로 실행하면 parcel이 자동으로 다시 빌드하고 핫리로드도 지원합니다. 그냥 진입점 파일만 지정해주면 됩니다. 개발 환경 parcel은 옵션을 건드릴게 없습니다. 그게 장점이라면

2019년 12월 26일
·
0개의 댓글
·

next.js에 Styled Components 적용을 위한 .babelrc 설정

프로젝트의 최상위 경로에 .babelrc 파일을 생성하고 다음 내용을 입력한다.

2019년 10월 30일
·
0개의 댓글
·