경험이 풍부한 JavaScript 개발자라면 Tree Shaking에 대해 들어보셨을 것입니다. 애플리케이션에서 사용되지 않는 코드를 제거하는 것은 일반적인 기술이며 애플리케이션에서 사용되지 않는 가져오기도 제거합니다. 여기서는 트리를 흔들고 불필요한 코드 분기를 제거하고 필요한 코드를 최종 패키지에 유지함으로써 "트리 쉐이킹"이라는 용어가 도입되었습니다.
기본적으로 트리 디더링은 유효하지 않거나 사용되지 않는 코드를 제거하는 데 사용됩니다.
튜토리얼의 위 부분에서 본 것처럼 트리 쉐이킹은 애플리케이션 패키지에서 사용되지 않는 코드를 제거하는 데 사용됩니다. Tree Shaking을 사용하는 주된 이유는 사용자의 브라우저에 전달하는 JavaScript 번들의 크기를 줄이는 것입니다. 패키지 크기가 작을수록 브라우저에서 더 빠르게 로드됩니다. 또한 웹 브라우저에서 번들을 다운로드하는 데 필요한 데이터가 적어 애플리케이션 성능이 향상됩니다.
특히, 대용량 동적 데이터에 의존하는 웹사이트를 개발할 때 트리 쉐이킹 기술은 매우 중요합니다. 웹 애플리케이션이 매우 크지만 정적 웹 페이지를 포함하는 경우 트리 쉐이킹이 필요하지 않지만, 애플리케이션이 작고 많은 동적 데이터를 로드하는 경우에도 추가 코드를 제거하기 위해 트리 쉐이킹이 필요합니다.
이 섹션에서는 실시간 개발에서 Tree Shaking이 어떻게 작동하는지 알아봅니다.
기본적인 예를 통해 트리 쉐이킹을 이해해 봅시다.
여기서 우리는 세 개의 서로 다른 파일을 생성하고 파일 이름을 기반으로 파일에 서로 다른 JavaScript 기능을 추가했습니다.
파일 이름 – sum.js
으아아아파일 이름 – Factorial.js
으아아아파일명-multiply.js
으아아아파일 이름 – index.js
으아아아위 예에서는 다른 파일에서 합계, 계승 및 곱셈 함수를 내보냈습니다. 그런 다음 index.js 파일에 세 가지 함수를 모두 가져왔습니다. 여기서는 sum() 함수만 사용하고 Factorial() 또는 Multiply() 함수는 사용하지 않았습니다. 따라서 index.js 파일에 사용되지 않은 가져오기가 있으므로 이를 제거해야 합니다.
ES5에서는 "require()"를 사용하여 다른 JavaScript 파일에서 함수나 모듈을 가져옵니다. 따라서 아래와 같이 조건부로 모듈을 가져올 수 있습니다.
으아아아여기에서는 조건에 따라 요구사항에 맞게 로드되도록 모듈을 가져옵니다.
그러나 ES6에서는 아래와 같이 조건부로 모듈을 가져올 수 없습니다.
으아아아위의 조건부 가져오기 코드는 작동하지 않습니다. 따라서 JavaScript 번들러를 사용해야 합니다.
위 섹션에서 본 것처럼 ES6에서는 조건부 가져오기를 사용할 수 없습니다. 따라서 webpack, Rollup, Parcel 등의 패키저를 사용해야 합니다.
먼저 트리 쉐이킹을 위한 번들러를 구성해야 합니다. 모드를 "프로덕션"으로 설정하고 트리 흔들기를 활성화하기 위한 최적화 설정을 추가하는 작업이 포함됩니다.
예를 들어 webpack에서는 다음 코드를 사용할 수 있습니다.
으아아아이후 사용자는 ES6 형식에 따라 모듈을 가져와야 하며 'require()' 메서드를 사용하여 가져오지 않도록 해야 합니다.
이러한 방식으로 개발자는 번들러를 사용하여 JavaScript에서 트리 쉐이킹을 활성화할 수 있으며, 이는 웹 브라우저의 로드 시간을 줄여 애플리케이션 성능을 향상시키는 데 도움이 됩니다.
위 내용은 JavaScript에서 트리 쉐이킹이란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
