# code splitting
FE 개념 정리 - 웹팩(webpack)의 기능
웹팩이란? > 자바스크립트 애플리케이션을 위한 모듈 번들러 효율적인 모듈관리와 코드 최적화를 가능하게 한다 모듈 번들러(module bundler)란? > 여러 개의 모듈로 구성된 프로젝트를 하나의 파일로 묶어서 사용하는 도구 웹팩의 기능 1. 모듈번들링 여러 개의
본격적으로 Webpack Optimize 하기 (Bundle Analyzer, Chunk, Minimize, Uglify)
이제 Webpack을 통하여 본격적인 Optimize를 진행해보려고 한다! 사실 Webpack5가 도입이 되면서 아주 기본적인 최적화를 default로 진행을 해준다고 한다. 하지만, 이외의 Plugin과 Optimaization 옵션을 적절하게 사용하면 번들크기를
[Frontend] Lazy Loading, Suspense 그리고 SSR
Suspense, lazy loading을 통한 성능 개선 및 React18에서 SSR에 대한 기능 추가에 관련된 글입니다.
Code splitting시 주의해야할 점(side effect)
어떤 환경이던 Code splitting을 해서 Dynamic하게 import를 진행 때에 주의해야 할 점이 있다. Next.JS의 dynamic을 사용하여 예를들어 설명해보겠다.일반적으로 dynamic import는 위와 같은 상황에 사용하게된다.실제로 이를 dev
221116_TIL
함수의 선언변수를 선언하고 해당 변수에 값을 할당했던 것처럼, 함수도 선언을하고 해당 함수가 실행할 코드의 집합을 만들어서 저장해준다.함수명은 함수가 하는 일들을 대표할 수 있는 이름으로 작성. \*매개변수(parameter)는 해당 함수의 Body에 있는 코드에서 사
💻 코드 분할(feat. 리액트 공식문서)
대부분 앱들은 Webpack, Rollup, Browserify같은 툴을 사용하여 여러 파일을 하나로 병합한 번들된 파일을 웹 페이지에 포함하여 한 번에 전체 앱을 로드 할 수 있다.번들이 거대해지는 것을 방지하기 위한 좋은 해결방법은 번들을 나누는 것이다.코드 분할은
[TIL]20220817
Next.js 공식문서 읽으면서 공부했다.Foundation (From React to Next.js, How Next.js Works)어제 공부하다가 궁금 사항들을 적으면서 정리해보았다.프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술이
[React] 코드 스플리팅 (Code Splitting)
스플리팅 발단 리액트 어플리케이션의 경우 빌드를 통해서 배포한다. 이 과정에서 파일 크기를 가능하면 최소화하는 것이 바람직하다. 왜냐하면 파일 크기가 성능을 결정하고 결과적으로 사용자 경험에까지 영향을 미치기 때문이다. 또한 브라우저에서 JSX나 최신 자바스크립
webpack5 설정하기
srcsrc.js/src/webpack.config.js/src/package.json/src/js/index.js/src/js/sub2.jsdist/dist/manifest.json/dist/index.html/dist/sub2.htmldistdist/jscss ba
Code-Splitting
Bundling 대부분의 리액트 어플리케이션은 webpack등의 도구를 이용해 번들링을 진행합니다. 번들링이란 어플리케이션 파일 사이의 의존성을 추적하고 합치며 하나의 "번들"이라고 불리는 파일로 만드는 과정을 말합니다. 번들은 웹페이지에 포함되어 전체 어플리케이션을
[성능최적화] Code Splitting 최적화하기
모든페이지에서 여러가지 라이브러리가 전부 필요하지 않다.라이브러리는 많은 데이터를 쓰게되고, 렌더링시간이 더 오래걸리기 때문에 페이지별로 라이브러리를 나눠서 사용해주는것이 최적화에 용이하다.페이지를 로드하다보면 왜 ?뭐 때문에? 로딩이 오래걸리는지 의문이 들때가 많다.
20220203 TIL
https://tech.kakao.com/2020/12/01/frontend-growth-02/ 위 글에서 보면 commonJS와 ESModule을 함께 사용하기 위해서 @babel/plugin-transform-modules-commonjs, 즉 preset-env
[React] Code Splitting
앱을 개발하고 배포를 하게되면 사용하는 모든 코드들이 하나의 번들로 묶여지게 됩니다.규모가 크지 않다면 그렇게 문제가 되지 않지만 규모가 커진다면 번들을 로드하는데 시간이 오래 걸리게 됩니다.이렇게 번들이 커져 로드하는 시간이 커지게 된다면 초기 렌더링 시간이 길어져
React | 코드 스플리팅 (+webpack / build)
리액트 프로젝트 완성 후 → 사용자에게 제공 시, 빌드 작업 거쳐 배포파일 크기 최소화 js 파일 내부의 불필요한 주석, 경고 메세지, 공백 등 → 제거 코드 트랜스파일 작업 브라우저에서 JSX 문법 or 다른 최신 js 문법 → 원활한 실행 되도록 정적 파일(
2021 0907
번들러로 전체 의존성을 관리하여 하나의 app.js 파일로 실행파일을 만드는 건 편리하지만, 프로젝트 규모가 커지면 파일 하나의 용량이 커지게 되고, 의존성을 전부 한번에 로딩하게 되면 로딩시간이 길어지게 되는 단점.필요한 컴포넌트만 로딩하는 방법을 코드 스플리팅이라고
코드분할(Code-splitting)
자바스크립트로 어플리케이션을 개발하게 되면 기본적으로 하나의 파일에 모든로직이 들어가서 용량이 커지고 속도가 느려지는 문제가 생기는데이를 방지하기 위해 코드를 따로 분리 시키고 비동기적으로 필요할때 불러와서 사용할수 있게 하는 것이다.리액트에서는 lazy-suspens
[React] 청크 로드 에러 해결하기 (Loading chunk failed)
지난시간에는 코드스플리팅에 대해서 설명했습니다. 허나 무작정 해당 기술을 적용하게되면 이전글에서 설명했다시피 문제가 발생합니다. 바로 배포에서 문제가 발생하는데요. 해서 해당 이슈에 대해 대응을 하고 적용을 하셔야 고생을 안합니다. 자 그럼 배포에서 대체 무슨 이슈
[React] 리액트 코드 스플리팅 (code splitting)
첫 글로 뭘 쓸까 고민을하다 요즘 리액트를 많이 사용하시니 리액트에 도움이 되는걸 써보려고합니다. 바로 코드스플리팅 인데요 다들 프로젝트가 처음에는 작게 시작하였다가 점점 요구사항이 많아지고 기능들이 추가되고 페이지가 추가되며 프로젝트가 거대해지는 경험을 해보셨을거라