Webpack

• 웹팩

  • file loader vs url loader

    • url-loader은 이미지 파일을 base-64로 변환하여 이미지 파일을 번들 파일에 포함 시키는 기능을 가지고 있다.
    • 이미지 파일을 번들 파일에 포함 시킴으로써 파일 요청 횟수를 줄일 수 있다. 그러나 파일이 너무 크면 안하는게 좋다.
    • https://jeonghwan-kim.github.io/js/2017/05/22/webpack-file-loader.html

  • 나무 흔들기(tree shaking)

    • (번들시) 불필요한 코드를 제거해 주는 기능
    • 기본적으로 제공 되어 있다

    //util.js
    export const func1 = () => {
      console.log('func1');
    }
    export const func2 = () => {
      console.log('func2')
    }
    //use.js
    import { func1 } from ./util.js
    func1();

    • 위 코드 번들시에 func2는 번들에 안들어가 있다.(treeshaking)
    • tree shaking 실패 하는 경우
      • 사용되는 모듈이 ESM이 아닌 경우
      • 사용하는 쪽에서 ESM이 아닌 다른 모듈 시스템을 사용하는 경우
      • 동적 임포트를 사용하는 경우
    • 외부 패키지 tree shaking

    //잘못된 예
    import { fill } from 'lodash'
    //잘 사용한 예
    import fill from 'lodash/fill'

  • 코드 분할

    • 번들을 작게 분할해서 사용.
    • 그때그때 필요한 코드가 들어가 있는 번들만 사용
    • 불필요한 코드까지 전송 되는것을 방지
    • 작게 분할하여 페이지 렌더링 최소화

  • ProvidePlugin

    • 설정한 모듈을 자동으로 등록 해준다.

    new webpack.ProvidePlugin({
        React: 'react'
    })

    • 위 코드를 사용시 React를 자동으로 등록 해줌으로써 매번 import React from 'react'를 쓸 필요거 없어진다.