Webpack Tree Shaking
[package.json sideEffects](https://texonom.com/packagejson-sideeffects-571df8cba7a04d7da1763e961da0f12f) 


import - 불필요한 파일을 제거함으로 코드량을 줄일 뿐만 아니라, 성능적으로도 더 좋습니다
require - require을 사용하면 동적으로 모듈을 불러올 수 있지만, 불필요한 코드들까지 불러오기 때문에 실제로 어떤 코드가 사용되었는지 명확히 알 수가 없습니다
웹팩의 tree shaking 기능을 유지하기 위해 설정시 modules: false로 하면 됩니다

[Webpack Side Effect](https://texonom.com/webpack-side-effect-0e7c7c474fef47b0bbb33a10959244b8)



### [Babel](https://texonom.com/babel-165b3496bfe34cf784466b17a7d946ec) 
```type{    "presets": [         [            "@babel/preset-env",            {                "modules": false,                "loose": true            }        ]    ]}```



> [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)

> [[나만의 웹팩 만들기] 2. babel 추가하기](https://hoilzz.github.io/webpack/2-add-babel/)

> [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)





