스터디 중간에 이야기 나눈 것, 정리한 것이 있다면 본인의 페이지를 만들고 공유해주세요!
https://www.youtube.com/watch?v=EP7g5R-7zwM&t=1017s
npm은 트리 구조로 모든 의존성을 다운로드하여 설치하지만, 중복된 라이브러리를 저장하는 방식으로 인해 node_modules 폴더가 매우 커질 수 있음.💭 참고 (gpt)
npm v7 이상에서는 yarn과 유사하게 의존성 관리 방식이 개선되었습니다. 특히, 중복된 패키지를 줄이기 위한 최적화가 강화되었는데, 그 중 하나가 npm의 package-lock.json 파일을 통한 의존성 트리 관리입니다.
Peer Dependencies 자동 설치:
npm v7부터는 peer dependencies가 자동으로 설치됩니다. 이전 버전에서는 수동으로 설치해야 했으나, 이제는 npm이 이를 자동으로 처리하여 의존성 관련 문제를 줄일 수 있습니다. 이로 인해 패키지 간 의존성 충돌이 줄어들고, 더 나은 일관성을 유지할 수 있습니다.
의존성 중복 최소화:
npm은 package-lock.json 파일을 이용해 중복 패키지를 최대한 줄이도록 개선되었습니다. 이전 버전에서는 중복된 의존성을 허용하는 방식으로 node_modules 폴더가 커지는 문제가 있었지만, npm v7부터는 중복된 패키지를 더 효율적으로 관리하여 의존성 트리가 최적화됩니다.
package-lock.json을 통한 안정성 보장:
package-lock.json은 프로젝트의 의존성 버전을 고정시켜, 프로젝트에서 사용하는 모든 패키지가 특정 버전으로 일관되게 설치되도록 보장합니다. npm v7에서는 이 파일을 더욱 강화해, 의존성 트리를 최적화하는 데 중점을 둡니다. 이를 통해 동일한 패키지를 여러 번 설치하는 것을 방지하고, 설치 속도와 디스크 공간 사용을 줄일 수 있습니다.
yarn은 중복된 라이브러리를 최소화하기 위해 일부 최적화 기능을 제공하나 완벽하지 않음
yarn -deduplicate
특히 yarn2는 dedupe 명령어로 중복된 패키지를 제거 가능.
lodash 같은 라이브러리에서 중복된 버전이 설치되는 것을 방지하기 위해 webpack의 alias 기능을 사용할 수 있음. 이는 특정 라이브러리를 하나의 버전으로 통일시켜 사용할 수 있게 해줌. lodash 외에 다른 중복된 라이브러리의 문제도 해결할 수 있음.//webpack.config.js
module.exports = {
resolve: {
alias: {
lodash: require.resolve('lodash'),
},
},
};
트리 쉐이킹(Tree Shaking): 필요 없는 코드를 번들에서 제거하는 기술. 트리 쉐이킹을 활용하려면 ES 모듈 구문을 사용해야 하고, Webpack이 코드에서 **side effect(부작용)**이 없다고 판단해야 제대로 작동함.
"sideEffects": false 설정: Webpack이 모든 파일에 side effect가 없다고 판단하게 하여 트리 쉐이킹을 적극적으로 시도.💭 참고
→ **"sideEffects": false**은 좋지 않음. 일부 side effect 가 있는 파일에도 side effect가 없다고 판단할 수 있기 때문이다.
{
"sideEffects": [
"*.css",
"*.scss"
]
}
위와 같이 css 또는 폴리필에 대해서는 사이드 이펙트에 넣어두는 것이 안전함.
"sideEffects": true 설정: Webpack이 모든 파일에 side effect가 있다고 판단하여 트리 쉐이킹을 적용하지 않음.💭 참고 (rollup)
preserveModules: true 설정: rollup에서 모듈의 파일 구조를 유지하여 개별 파일의 트리 쉐이킹이 제대로 되도록 함Side Effect 고려: 트리 쉐이킹 적용 시 side effect를 발생시키지 않도록 주의해야 하며, 라이브러리의 sideEffects 설정을 명시해줘야 함. 예를 들어, 프로젝트에서 lodash를 사용할 때 트리 쉐이킹을 적용하려면 babel-plugin을 사용하여 필요한 모듈만 import하도록 설정할 수 있음.