Webpack Tree Shaking

Creator

Creator

Seonglae Cho

Created

Created

2020 Aug 10 2:46

Editor

Editor

Seonglae Cho

Edited

Edited

2022 Jun 3 6:18

Refs

Refs

package.json sideEffects

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

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

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

Webpack Side Effect

Babel

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

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

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

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

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

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

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

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

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

[나만의 웹팩 만들기] 2. 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 적용하기

Recommendations

/////////////