Code Splitting

2022. 10. 10. 15:20·개발정보
반응형

코드 스플리팅? 

Webpack과 같은 모듈 번들러에서 사용되는 중요한 기능이다. 

하나의 큰 번들을 여러개의 작은 번들들로 쪼개주는 기능을 한다. 

 

필요할때 필요한 번들만 로드 함으로써 초기 로딩시간을 줄여주고, 현재 페이지에서

필요없는 코드는 로드하지 않기 때문에 앱의 성능도 향상시킬 수 있다. 

 

하는 방법

@babel/plugin-syntax-dynamic-import

사용하는 방식으로 적용할 계획이다. 

 

npm i --save-dev @babel/plugin-syntax-dynamic-import

당연히 먼저 할일을 필요한 패키지를 다운받는 일이다. 

 

{
  "presets": [
   // ...
  ],

  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

바벨 설정 파일에 plugins에 @babel/plugin-syntax-dynamic-import를 추가한다. 

 

 import(/* webpackChunkName: "main_js" */ "./container/main").then(
    ({ default: main }) => main()
  );

그리고 필요한 곳에 dynamic import를 사용하면 된다. 

반응형
저작자표시 비영리 변경금지 (새창열림)

'개발정보' 카테고리의 다른 글

사파리의 vh  (1) 2022.10.23
Webpack css url 파일 문제  (1) 2022.10.15
OAuth  (1) 2022.10.08
babel-plugin-transform-remove-console 사용기  (1) 2022.10.04
Webpack  (1) 2022.09.27
'개발정보' 카테고리의 다른 글
  • 사파리의 vh
  • Webpack css url 파일 문제
  • OAuth
  • babel-plugin-transform-remove-console 사용기
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    식물
    바질 키우기
    알고리즘
    Docker
    webpack
    리액트
    타입스크립트
    Babel
    CCNA
    리얼클래스
    네이버 부스트캠프
    영어회화
    리얼학습일기
    자바스크립트
    네트워크
    react
    프로그래머스
    덤프
    ChatGPT
    ReactNative
    typescript
    다이소
    javascript
    next.js
    CSS
    Node.js
    redux
    바질
    영어독학
    타일러영어
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
Code Splitting
상단으로

티스토리툴바