나무가 흔들리는 것은 무엇입니까? 웹의 성능에 왜 중요한가요?

웹이 거북이 크롤링처럼 천천히로드됩니까? 모든 웹 사람들이 직면 해야하는 문제

우리가 아름답고 완전하게 잘하려는 웹 사이트를 느낀 적이 있습니까? 그러나 실제로 그것을 사용할 때가되면 "느린"은 실망 스럽습니까? 고객은 웹 사이트가 완료되기 전에 오랫동안 기다려야합니다. 많은 사람들이 그것을 견딜 수 없습니다. 제품이나 서비스를보기 전에 누르기 전에 충격적인 통계가 웹을 다운로드하는 데 몇 초 밖에되지 않아도 이탈률 (클릭 속도)이 상승하고 전환율이 떨어질 수 있습니다. 이것은 매력적이지 않은 디자인으로 인해 발생하는 실제 문제이지만 웹 사이트의 "성능"입니다.

‍

프롬프트 : 사용자의 이미지는 컴퓨터 화면이나 모바일을 쳐다 보면서 자극 된 표현을 보여줍니다. 와인 적재 기호가있는 다운로드 웹 사이트를 기다리는 느낌이 전달됩니다.

웹이 느리게하는 이유는 무엇입니까? 사용되지 않은 코드의 소스 (그러나 여전히 다운로드해야 함)

보다 복잡한 웹 사이트의 시대에, 우리는 라이브러리 또는 프레임 워크를 사용하여 시스템에 플러그인을 쉽고 빠르게 추가 할 수 있도록 도와줍니다. 이 도구에는 종종 많은 양의 JavaScript 코드가 제공되지만 문제는 웹 페이지에 있습니다. 가져 오는 전체 코드의 10-20% 만 호출 할 수 있지만 사용자의 브라우저는 사용하지 않는 "전체"코드를 다운로드해야합니다. 우리가 큰 피자를 주문한 것처럼 JavaScript 파일 크기 (번들 크기)를 필요한 것보다 크게 만들지 만 나머지는 한 조각 만 집으로 가져 가야했습니다. 이것이 귀하의 웹 사이트가 "Fat"및 "Slow"를 모르는 주된 이유입니다.

‍

프롬프트 : 인포 그래픽 이미지 두 나무를 비교합니다. 하나의 나무에는 완전한 가지가 있습니다. (라이브러리의 모든 코드 대신)와 다른 트리에는 필요한 가지만 있으며 무성한 잎이 있습니다. (실제 활성 코드 대신) 첫 번째 트리에서 두 번째 트리를 가리키는 화살표가있는 메시지가 "사용되지 않은 코드"가 죽었습니다.

"지방"웹 사이트가 계속 이루어지게 하시겠습니까?

웹 사이트에 사용되지 않은 코드를 사용하면 생각보다 훨씬 더 큰 영향을 미칩니다. 느린 감정의 문제가 아닙니다. 그러나 비즈니스와 SEO 순위에 직접 영향을 미칩니다.

• Core Web Vitals Drops : 많은 JavaScript를로드하는 웹 사이트는 브라우저의 작동을 차단하여 LCP (가장 큰 콘텐츠 페인트)와 INP (Interactive to Next Paint)가 악화되며 Google은 순위에서 중요한 요소로 사용합니다.
• SEO 순위 : Vitals가 나쁜 경우 Google은 귀하의 웹 사이트가 사용자에게 나쁜 경험을 제공한다는 것을 알게됩니다. 그리고 당신의 계급이 쉽게 동의하게 만들 수 있습니다
• 사용자가 탈출 : 아무도 기다리는 것을 좋아하지 않습니다. 웹 사이트가 느려지면 사용자는 웹에서 경쟁 업체를 더 빨리 닫고 경쟁 업체를 찾습니다.
• 전환율 감소 : 사용자가 고객을 고객으로 변경할 수있는 모든 기회를 피할 때 (변환)는 거의 0입니다.

다시 말해, 귀하의 웹 사이트에 사용되지 않은 코드에서 "지방"이 초과 할 수 있도록합니다. 그것은 자신의 사업 기회를 파괴하는 것과 같습니다. 렌더 블로킹 리소스는 간과해서는 안되는 것입니다.

‍

프롬프트 : 부정적인 결과를 보여주는 3 개의 그래프 이미지 : 1 'SEO Ranking', 2nd Bar, 'User Frustation'상승, 3 번째 '전환율'배관이 쉽게 이해되는 아이콘이 있습니다.

초과 코드를 줄이는 데 도움이되는 "나무 흔들림".

이 행사의 영웅입니다. ** 나무가 흔들리는 것은 무엇입니까? ** 가장 쉬운 대답은 "Dead Code Salad (Dead Code)가 남은 프로세스"입니다. 잎을 마르기 위해 우리가 "흔들리는"나무를 상상해보십시오. 죽은 사람이 무너졌습니다. 코드 쓰기의 세계에서 여전히 신선하고 강한 지점과 잎 만 남기기 위해 Tree Shaking은 Bundler ( Webpack 또는 Rollup과 같은 다른 코드 파일을 결합하는 도구)가 프로젝트 모두 코드를 분석하는 프로세스입니다. 그런 다음``function ',`variable'또는 'module'을 찾으십시오. 우리는 SDPO를 가져 오지만 사용 중이지 않습니까? "웹 사이트가 크게 다운로드하는 데 필요한 코드 만 남기고

‍

프롬프트 : 애니메이션 또는 인포 그래픽 이미지는 프로세스를 보여줍니다. 1. 큰 상자에는 많은 코드가 있습니다. (중고 및 사용하지 않은) "Tree Shaking Bundler"라는 기계로 흘러 들어갑니다. 2. 일부 코드는 쓰레기로 분리되었습니다. 3. 결과는 작은 상자입니다. 필요한 코드만으로

실제 예제 : 파일 크기를 70%줄입니다. 그냥 나무 흔들림을 사용하십시오.

프로젝트 관리를위한 웹 응용 프로그램 개발 회사가 있다고 가정 해 봅시다. 처음에는 대형 UI 라이브러리를 사용하여 앱 작업이 매우 느 렸지만 개발 팀을 사용하는 소수의 구성 요소 만 사용하여 기본 JavaScript 파일이 1.5MB이며 너무 큰 것으로 나타났습니다. 빌드 프로세스를 확인한 후, 그들은 개발 된 모드에서 트리 흔들림이 올바르게 활성화되지 않았다는 것을 알았습니다.

팀은 제작을위한 빌드가있을 때 웹 팩의 설정이 올바르게 작동하도록 개선했습니다. 결과는 나무가 흔들리고 있습니다. 엄청나게 사용되지 않은 구성 요소를 분석하고 절단 할 수 있습니다. JavaScript 파일의 최종 크기는 1.5MB에서 450KB로만 감소하거나 ** 거의 70%로 감소합니다! ** 웹 사이트는 2 초 이상 다운로드되었습니다. 사용자 경험도 향상되었습니다. 이것은 코드에 대한 "지방 절단"의 힘입니다.

‍

프롬프트 : 명확하게 전/후 : '전', 1.5MB 파일 크기의 그래프이며 다운로드 페이지가 느립니다. 'After'는 450KB 파일 크기를 보여주는 그래프이며 사용자의 미소로 다운로드 한 웹 페이지와 동일한 웹 페이지가 있습니다.

나무가 흔들리는 방법, 시작 방법? (개발자를위한 체크리스트)

프로젝트가 나무 흔들림에 완전히 유용하다는 것을 확신하고자하는 개발자에게. 이것은 즉시 따라갈 수있는 간단한 점검 목록입니다.

• Use the ES2015 Module Syntax (`` Import` and `Export`: Tree Shaking relies on Static analysis, which works best with the` `IMPORT/EXPORT's IMPORLE (ES MODULE), so avoid the use of the commanjs in the Client-SIDE codes. MDN Web DOCS
• Bundler를 올바르게 설정하십시오. 웹 팩의 경우 'Mode :'Production '을 설정하면 트리 흔들림 및 기타 최적화가 자동으로 활성화됩니다.
• 부작용에주의하십시오 : 'JSON's PACKED.JSON의 파일에서 "SideEffects"를 찾으십시오 : False`Bundler에게 "이 패키지의 코드에는 가져올 수없는 부작용이 없습니다." 일로 복귀하는 데 더 효율적으로 도움이 될 것입니다.
• 결과를 확인하십시오 : 마지막 번들 파일에서`webpack-bundle-analyzer '와 같은 도구를 사용하여 마지막 번들 파일에서 확인하십시오. 불필요한 코드가 있습니까? 전반적인 그림을보고 개선 해야하는 지점을 찾는 데 도움이됩니다.

성능의 개선은 나무 흔들리는 것이 아닙니다. 섬 아키텍처 또는 글꼴 로딩 전략 과 같은 다른 기술 도 공부해야 할 것입니다.

‍

프롬프트 : 각 아이콘이있는 체크리스트 이미지 : JavaScript ES6 아이콘, 구성 아이콘, 부작용 및 아이콘 분석을 통해 이해하기 쉽고 사용할 수 있습니다.

사람들이 나무가 흔들리는 것에 대해 궁금해하는 질문

CSS와 함께 나무 흔들림을 사용할 수 있습니까?
좋아요! 유사하게 작동하는 Purgecs와 같은 도구가 있습니다. HTML 및 JavaScript 파일을 스캔하여 사용 된 클래스 이름을 확인합니다. 최종 파일에서 사용되지 않은 CSS를 삭제합니다. CSS 파일 크기를 효율적으로 줄이는 데 도움이됩니다

나무가 미생물과 어떻게 다른가요?
차이가 분명합니다. 미니는 갭, 새 줄과 같은 코드에서 불필요한 문자를 제거하거나 변수 이름을 단축하는 것입니다. 그러나 모든 코드 (논리)는 여전히 완료되었습니다. 나무 흔들리는 것은 "전체 블로그 전체를 삭제하는 것"입니다. 두 기술 모두 종종 가장 작은 파일을 얻기 위해 함께 사용됩니다.

매번 스스로 나무를 흔들어야합니까?
필요하지 않습니다. 대부분의 경우 최신 프레임 워크 (예 : Next.js, React App, Vue Cli)는 Bundler (Webpack)를 자동으로 설정합니다. 생산 모드에서 빌드를 주문할 때, 우리의 의무는 코드를 친근하게 작성하는 것입니다.

내 코드에 부작용이 있으면 어떻게됩니까?
부작용은 가져 오는 즉시 (전역 객체 편집 또는 DOM에 CSS 추가)를 수행하는 즉시 무언가를 수행하는 코드입니다. 이는 프로그램이 깨질 것이라는 두려움 때문에 트리 흔들림이 해당 코드를 절단하지 않도록 할 수 있습니다. 부작용이있는 파일이 필요한 경우`package.json`에 값이 "sideeffects": [ "./path/to/your/file.js"]에 국한되어야합니다.``Bundler에게 말하고 해당 파일을 잘라 내지 않기 위해.

‍

프롬프트 : 질문 2-3의 중요한 답변이있는 큰 Q & A 아이콘 이미지는 읽기 쉬운 음성 버블 형식을 중심으로 수행됩니다.

요약 : 지방을 최고의 성능으로 자릅니다.

이 시점에서 모든 사람들은 아마도 ** 트리 흔들림이 **를 이해하고 현대 웹 사이트 개발에서 강력하고 필수적인 도구 인 이유는 무엇입니까? 프로젝트에서 "철분 지방"또는 불필요한 코드를 돕는 자동 프로세스입니다. 웹 사이트를 더 작고로드하여 더 빠르게로드하여 사용자에게 좋은 경험을 제공하고 SEO Rank와 직접 제공합니다.

웹 사이트의 성능을 유지하는 데 사용되지 않은 코드를 사용하지 마십시오. 돌아가서 오늘 "Tree Shaking"이라는 영웅이 이미 열렸는지 오늘 빌드 과정을 확인합시다. 확실히 장기적으로 엄청난 보상을 줄 것입니다

또한 코드 분할, 최적화 또는 복잡한 개발을 수행하든 웹 사이트 수행자를 업그레이드하기 위해 전문가가 필요하다면 팀 팀이 조언을 제공 할 준비가되면 고급 웹 플로우 개발 서비스를 통해 가장 빠르고 강력한 웹 사이트를 만드는 데 도움이 될 수 있습니다.

‍

프롬프트 : 강력한 요약 : 로켓이 하늘로 솟아 오릅니다. "웹 성능"이라는 단어는 로켓에 첨부됩니다. 방패 아래에는 사용되지 않은 코드를 방지하기 위해 "트리 흔들림"이 작성됩니다.

‍