최근 사업건 회고 최근 들어온 사업 중에 어드민 모듈을 맡게 되었습니다. 기존에 webpack으로 구성하던 프로젝트들과 별개로 The State of JS에서 봐왔던 vite라는 번들러의 esbuild 에 대해 경험해보자라는 의견을 내게 되었고 vite 환경으로 구성하게 되었습니다. vite 프로젝트 구성 사실 많은 글들에서도 보았듯이 vite 프로젝트를 구성하기에는 cra 만큼이나 명령어만으로도 쉽게 구성할 수 있었습니다. (생략) vite를 사용해보며 느낀 간단한 장단점 Vite Vue 창시자 Evan You가 만든 새로운 프론트엔드 도구로 프랑스어로 "빠르다(Quick)"를 의미하며 빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구 입니다. [장점] 정말 빠르다고 느꼈습니다. 위에서 설명한 만큼 실제 사용했을 때 정말 말도 안되는 속도로 느껴지면서 "뭐야, 벌써 빌드가 되었어?" 라는 느낌이 들었습니다. r

현재 이 글은 Webpack bundle 사이즈 최적화 - (2) 의 시점 바로 다음에 최적화 했던 부분인데.. 현생이 바쁘단 이유로 글 써야지 써야지.. 만 반복하고 미루어 왔다가 지금 적게 되었습니다. 최근 회사 본부에서 사이트에 서비스를 런칭한 이 후 본부적으로 제가 담당하였던 캘린더 모듈의 초기 로딩 속도 및 렌더링 속도가 빠르다는 얘기를 듣게 되었습니다. 이에 본부 FE 연구원들에게 제가 적용하였던 부분에 대해 공유하는 자리가 있게 되었고 그에 따라 이 글을 적게 되었습니다. 오늘의 주제는 간단하게 코드 스플리팅 입니다. 지난 글 회고] 지난 포스트에서는 lighthouse와 관련해서 font 최적화 부분들과 (물론 CDN 부분은 추후에 적용 되었지만 누락 되어있는 부분), webpack 설정의 production 모드에 대해 글을 적었습니다. 기본적으로 앞서 설명하였던 production 모드를 통해서 번들링 사이즈를 줄이고, minify 및 compre

지난 글과 이어서 어느정도 기능 개발을 좀 더 진행하고, 다시 webpack 번들링을 찾아보고 알게 된 부분에 대해 정리 해본다. 지난 글에 font 관련 최적화 진행했던 부분. main.js 주로 production bundle size를 줄이기 위해서 많이 나오는 얘기가 code splitting 이지만 그 부분은 아직 덜 알게되어서 이 후에 다시 정리하는 것으로 하겠다. (첨부한 사진에는 splitting 한 것처럼 보인 부분은 테스트 차원이어서 무시..) 오늘은 주로 webpack.config.js에 대해 다룰 예정이다. 기존 프로젝트에서 구성하고 있던 webpack.config.js의 일부이다. devtools의 옵션은 https://ibocon.tistory.co

최근상황 요즘은 회사에서 캘린더를 담당하고 있다. 캘린더 모듈을 슈퍼앱 환경 앱스토어에 등록하고, 여러 유저가 사용할 수 있도록 하는 과정을 진행하였다. 웹팩 최적화나 lighthouse 같이 이론상으로만 알고는 있었지만 적용해보지 못한 것을 해보았던 경험을 적어 본다. LightHouse 확인 그간 개발과 기능 추가에만 열중한 탓에 개발된 환경이 얼마나 최적화 되어있을지 확인해보지 못하였어서 local환경에서 크롬의 lighthouse를 확인해 보았다. > 이럴수가.. perfomance 환경이 31점이라는