# bundler

100개의 포스트

코드 분할(Code Splitting)

Code Splitting 번들된 파일이나 코드를 여려개로 분리하는 것을 의미하며, 번들이 여러개로 나누어져 있기 때문에 특정 컴포넌트만 골라서 로딩하거나 여러 컴포넌트를 병렬로 로딩할 수 있게 된다. 코드의 양과 서드파티 라이브러리의 양이 늘어나면 번들된 파일의 용

약 13시간 전
·
0개의 댓글
·
post-thumbnail

Rspack: 속도와 호환성에 초점을 둔 번들러

그간 Rspack에 대해 공부하고 조사하며 생각난 여러가지 주제들을 나열한 간단한 글이다.

1일 전
·
0개의 댓글
·

EMS이란

ECMAScript Module의 약자로Ecma 단체에 의해 제정된 스크립트 ECMAScript의 버전중ES6부터 추가된 자바스크립트 모듈 기능으로CJS(CommonJs), AMD (Asynchronous Module Definition / 비동기 모듈화)등과 함께sc

1일 전
·
0개의 댓글
·

webpack에 babel 사용해보기

react를 사용하거나 se6를 지원하지 않는 브라우저를 지원하기 위해 webpack 설정시 같이 사용할 수 있는 babel에 대해서 간략히 정리해 본다.babel은 javascript compiler로 es6 이상 버전의 코드를 브라우저 호환성을 위해 es5 코드로

2일 전
·
0개의 댓글
·

Webpack 기초적인 사용법

webpack 자바스크립트 모듈 번들러로, 플러그인과 로더를 통해 자바스크립트 외의 소스 파일들을 번들링 할 수 있다. 번들링 개발단계에서 생성된 html, css, javascript, image 등의 파일들을 압축해 네트워크 코스트를 줄이는 방법으로 브라우저에서

3일 전
·
0개의 댓글
·

웹팩 맛 좀 더보기

config 파일 작성해보기

2023년 3월 2일
·
0개의 댓글
·
post-thumbnail

웹팩 맛만보기 - 생활코딩

웹팩 적용하는 법만 정리해보자

2023년 2월 28일
·
0개의 댓글
·
post-thumbnail

Vite! 정말 빠른 번들러 Vite 적용기

안녕하세요~👋 고영이에요. 오늘은 정말 정말 빠른 번들러인 Vite를 소개하려고 해요. SPA 등의 라이브러리나 프레임워크를 쓰다보면 제품 성능과 파일 관리를 위해 웹 번들러를 사용하게 되는데요. 가장 보편적으로 webpack을 많이 사용하지만 webpack의 단점인

2023년 2월 23일
·
0개의 댓글
·
post-thumbnail

Vite를 이용하여 정적 웹페이지 배포하기

vite 설치 vite 생성을 하고 framework는 빌드 파일이 js로 생성되는걸 원하지 않기 때문에 vanilla를 선택함. package 설치 및 사용 glob glob는 파일들의 리스트를 뽑을 때 사용. glob() 함수는 인자로 받은 패턴과 이름이 일치하

2023년 1월 30일
·
0개의 댓글
·
post-thumbnail

번들러(WebPack, Babel)

번들러는 의존성이 있는 모듈 코드를 하나(또는 여러 개)의 파일로 만들어주는 도구이다. 브라우저 환경에서는 CommonJS나 일부 ES6 Module로 작성된 코드(크롬과 같은 최신 브라우저에서는 ES6 Module을 지원한다)는 바로 실행할 수가 없으므로 모듈 코드를

2023년 1월 28일
·
0개의 댓글
·
post-thumbnail

Webpack5 설정 무작정 해보며, 자바스크립트의 역사에 대해 알아보기

프론트엔드라면 언젠가는 거쳐야 할 번들러에 대한 공부를 시작했다. 가장 널리 알려진 webpack5 를 기반으로 무작정 실습해 봤다. 연말에 우연찮게 재택근무를 하게되어, 퇴근 후 시간이 조금 넉넉해졌기에 조금 여유롭게 공부했고, 이해한 대로 한번 기술해 보고자 한다.

2022년 12월 29일
·
0개의 댓글
·

Granular Chunking

💡 이 글은 Next.js 와 같은 프레임워크에서 사용하고 있는granular Chunking 전략에 대한 내용을 번역한 글입니다.

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

Bundler는 대체 왜 날 괴롭히는가? - WebPack, CRA, Vite

한 프로젝트의 유지보수를 진행하며 WebPack과 create-react-app을 함께 사용하는 모습을 확인하였다. Vue로 짜여진 패키지는 webpack으로 빌드하고, React로 짜여진 패키지는 create-react-app의 react-scripts로 빌드하고

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

[번들러] Webpack 과 Parcel 그리고..next?

자바스크립트 환경에서 개발을 하다보면 필연적으로 수없이 많은 모듈화된 파일들을 마주하게 된다.js, css, scss 등과 같은 개발 관련 파일들과 jpeg와 같은 소스 파일 등 수많은 파일들이 혼재해 있는 여러 모듈들을 하나하나 메인 output이 될 index.ht

2022년 11월 18일
·
0개의 댓글
·
post-thumbnail

TODO APP으로 Webpack, Vite, CRA 비교하기

주의: 프로젝트 구성의 차이와 명령을 실행하는 데 걸리는 시간을 측정하지 않는 경우도 있습니다. 그런 경우 time명령어를 사용하였 측정 하였습니다. 그러하므로, 결과에 오류가 있을 수 있습니다. 🙇🏻‍♂️ 피드백 환영합니다. 들어가기 전 이전 글에서 동일한

2022년 11월 17일
·
0개의 댓글
·
post-thumbnail

module bundler

Bundler가 무엇이고, 어떻게 작동하고 어떤것들이 있으면 장점으로는 무엇이 있는지에 대해서 알아보았다.

2022년 11월 15일
·
0개의 댓글
·
post-thumbnail

creact-react-app 벗어나기 (feat. Vite)

create-React-App(이하 CRA)는 React를 처음 배우는 사람들 또는 프로젝트를 경험한 사람이라면 무조건 들어보고 사용했을 것이다. CRA를 자주, 즐겨 사용하던 습관을 버리고자, 리서치한 결과를 정리해보고 Webpack과 Vite를 비교해보고자 한다.J

2022년 11월 14일
·
0개의 댓글
·

Webpack(웹팩)이란?

웹팩(webpack)은 모던 Javascript 애플리케이션을 위한 정적 모듈 번들러이다.웹팩이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 맵핑하고 하나 이상의 번들을 생성하는 디펜더시 그래프를 만든다.디펜더시 그래프(Dependency Gr

2022년 10월 26일
·
0개의 댓글
·
post-thumbnail

Vite

webpack, vite

2022년 9월 19일
·
0개의 댓글
·