Webpack Tree Shaking

import - 불필요한 파일을 제거함으로 코드량을 줄일 뿐만 아니라, 성능적으로도 더 좋습니다

require - require을 사용하면 동적으로 모듈을 불러올 수 있지만, 불필요한 코드들까지 불러오기 때문에 실제로 어떤 코드가 사용되었는지 명확히 알 수가 없습니다

웹팩의 tree shaking 기능을 유지하기 위해 설정시 modules: false로 하면 됩니다

Babel


{
    "presets": [ 
        [
            "@babel/preset-env",
            {
                "modules": false,
                "loose": true
            }
        ]
    ]
}

Webpack(웹팩) Import vs Require 차이점은 무엇일까?

웹팩에서 Import와 Require을 사용시 발생하는 차이점에 대해 간단히 알아보도록 하겠습니다. 아래와 같이 file1.js를 불러왔을 때, 특정 실제로 사용할 a값을 가져올 수 있으며 나머지값들은 웹팩의 tree shaking으로 인해 빌드에서 제거됩니다. 즉, 불필요한 파일을 제거함으로 코드량을 줄일 뿐만 아니라, 성능적으로도 더 좋습니다...

https://medium.com/@shlee1353/webpack-%EC%9B%B9%ED%8C%A9-import-vs-require-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C-17948f6c919e

[나만의 웹팩 만들기] 2. babel 추가하기

코드를 보려면 이동 babel은 JS Compiler다. 바벨은 ES6+ code를 ES5로 변경해준다. 그래서 하위 브라우저(IE..그리고 IE..)에 대응할 수 있다. 바벨 getting started 에서 제안하는 package를 먼저 설치하자. core : transpile시 이용되는 코어 모듈 preset-env : 최신 JS를 이용할 수 있도록 해주는 smart preset. 얘 이용하면 어떤 syntax가 타겟 환경에 맞춰서 transpile되어야 하는지 micromanage...

https://hoilzz.github.io/webpack/2-add-babel/

webpack에서 Tree Shaking 적용하기

egjs의 InfiniteGrid 컴퍼넌트 에 용량 개선 작업 중에 Tree Shaking을 도입하면서 알게된 사실을 정리해봤습니다. 환경은 webpack 3.x, 4.x | babel-loader 8.x | babel 7.x 에서 테스트했습니다. npm install babel-loader @babel/core @babel/preset-env webpack Tree Shaking은 사용하지 않는 코드를 제거함으로써 용량을 줄일 수 있는 방식입니다. 특정 라이브러리를 참조하면 참조한 라이브러리의 크기만큼 최종 번들의 용량이 증가하게 됩니다.

https://medium.com/naver-fe-platform/webpack%EC%97%90%EC%84%9C-tree-shaking-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-1748e0e0c365

Webpack Tree Shaking

Babel

Recommendations