Google의 Lighthouse는 이제 JavaScript 라이브러리 대안을 권장합니다.

등대의 개념을 은유로 사용하여 Google Lighthouse는 자산별로 발견한 문제에 빛을 비추어 개발자를 바위에서 멀어지게 합니다. 성능 및 보안 개선에 대한 특정 피드백과 함께 보고서에는 압축으로 크기 조정을 사용할 수 있는 미디어에 대한 참조, 새롭거나 다른 캐시 정책, 사용하지 않는 CSS 및/또는 JavaScript 블록이 포함된 링크된 파일이 포함됩니다.

그러나 9월까지 Google은 JavaScript 라이브러리 자체를 호출하지 않았습니다.

JavaScript 라이브러리가 비용이 많이 드는 것으로 판명되면 더 작은 대안으로 교체하십시오.

@ChromeDevTools의 Lighthouse는 이제 번들 크기를 개선하는 더 작은 라이브러리를 권장합니다. pic.twitter.com/VFe8TFV9Y5

— Addy Osmani(@addyosmani) 2020년 9월 12일

그리고 이제 경고가 Page Speed ​​Insights에 표시되도록 졸업했습니다.

자바스크립트에 대한 한마디

오픈 소스 JavaScript 세계에서 개발자는 이전 개발자, 특히 새로운 라이브러리 작성자가 해결해야 하는 문제를 해결한 개발자의 어깨 위에 있습니다. 널리 사용되는 JavaScript 패키징 시스템 NPM(Node Package Manager)을 사용하면 프로젝트에 기존 라이브러리를 쉽게 포함할 수 있습니다. 시작점에서 주어진 JavaScript 프로젝트는 항상 NPM이 .node_modules 디렉토리에 저장하는 훨씬 더 많은 JavaScript로 구성된 빙산의 일각입니다.

프로젝트, 특히 정교한 프레임워크를 사용하여 만든 프로젝트는 주로 수많은 라이브러리 종속성을 통해 사용 가능한 코드의 아주 작은 퍼센트만 사용합니다. 그렇기 때문에 주어진 프로젝트에서 적극적으로 사용하고 있는 것만 가능한 한 많이 묶기 위한 "트리 쉐이킹"이라는 최적화 프로세스가 있습니다. 트리 쉐이킹은 최신 구문 및 코딩 패턴을 따라가는 목표로 인해 이전 라이브러리에서 항상 잘 작동하지 않습니다.

프레임워크 정보

프레임워크는 라이브러리를 선택하고, 번들러를 구성하고, 프로덕션을 위한 최적화 프로세스를 자동화하는 스크립트를 작성하는 복잡성을 제거하여 개발자의 삶을 더 쉽게 만듭니다. 대부분의 문서에 있는 "빠른 시작" 방법을 사용하여 개발자는 대부분의 패키지 프레임워크의 일부로 제공되는 미리 작성된 명령줄 인터프리터 스크립트를 시작하고 실행할 수 있습니다. 이에 대한 예는 웹 애플리케이션으로 추가 개발할 수 있도록 준비된 빈 React 애플리케이션 코드를 스캐폴딩하는 Create React App입니다.

$ npx create-react-app my-app

위의 명령을 실행하면 "my-app" 디렉토리가 생성되고 필요한 모든 파일 및 라이브러리 종속성이 포함된 전체 React 앱 디렉토리 트리가 생성됩니다. 여러 Javascript 라이브러리의 코드를 포함할 수 있는 프로덕션 번들을 최적화하는 것은 아마도 최신 프레임워크 패키지에 사용되지 않는 코드 블록을 제거하고 프로덕션 출력을 최소화하는 도구와 단계가 있는 가장 중요한 이유일 것입니다.

프레임워크를 사용하기로 선택하면 모든 세부 사항을 알지 못하더라도 해당 프레임워크의 아키텍처, 구성 및 라이브러리 종속성에 대한 어려운 결정을 수락하게 됩니다. 다음은 현재 NextJS와 같은 많은 프로젝트 및 프레임워크에서 사용되는 인기 있는 프론트엔드 라이브러리 제조업체의 프로덕션을 위해 React를 최적화하기 위한 가이드입니다.

소수의 오래된 라이브러리(당시에는 매우 유용함)가 종속성으로 프로젝트 번들에 들어가는 것이 너무 일반적입니다. JavaScript 이정표 이전에 작성된 웹 사이트, 라이브러리 및 프레임워크는 JavaScript가 근본적으로 엄청난 속도로 진행되기 때문에 더 이상 사용되지 않는 코드를 사용할 때 수명을 보여줍니다. Lighthouse는 이제 프로젝트에 오래되거나 취약한 코드가 포함되어 있을 때 경고하는 신호 역할을 합니다.

모멘트JS

주목할만한 라이브러리인 MomentJS(2020년 9월 기준 매주 1,200만 다운로드)는 Lighthouse가 몇 가지 더 나은 옵션이 있다고 지적한 첫 번째 라이브러리입니다. 여기에서 Google의 논리는 반박할 수 없고 오히려 잘 알려져 있습니다. 이에 대한 응답으로 Moment의 자체 홈페이지와 문서는 이제 Lighthouse의 보고에 제공된 조언을 반영합니다. 순간은 기능이 중지되었으며 안정성 업데이트만 계획되었습니다.

Google이 현미경으로 보유하고 있는 다른 라이브러리로는 Lodash와 Underscore가 있습니다. 개발자 커뮤니티 전체에서 이에 대해 정당한 부정적인 감정이 표현되었으며, 한 명 이상의 개발자가 이를 오픈 소스 커뮤니티에 "유해한" 또는 "유해한"이라고 불렀습니다. 불만은 Google이 라이브러리를 "부끄러워"하는 것과 관련이 있습니다. 충분한 컨텍스트를 제공하지 않고 더 작고 덜 알려진 라이브러리 대안의 발견에 해를 끼칠 수 있는 대안을 홍보하지 않습니다.

이 모든 것이 사실이지만 오믈렛을 만들기 위해 계란을 깨야 한다는 것 또한 사실입니다. 진보는 종종 일부 사람들에게 상처를 줄 것입니다. Google은 대체 라이브러리 목록을 수집하기 위해 타사 참조(BundlePhobia)를 사용합니다. 그들은 Lighthouse 팀이 결정한 "동등성에 대한 높은 기준"과 "마이그레이션 용이성"을 기반으로 선택을 추가로 검토합니다.

덜 알려진 라이브러리 작성자는 서비스에 라이브러리를 제출하여 혼합에 참여할 수 있습니다. 또한 한 개발자는 Google이 이제 공식적으로 라이브러리를 추천하고 있으므로 프로젝트에 기부하여 오픈 소스 자금 조달에 도움이 되어야 한다고 언급했으며 Twitter의 팀원은 2021년부터 이 작업을 시작하기로 동의했습니다.

이것은 정말 좋은 아이디어입니다. 이러한 팀에 지원이 필요하다는 데 전적으로 동의합니다. Chrome은 현재 이와 같은 작업을 후원하기 위해 매년 웹 성능 및 프레임워크 기금을 보유하고 있습니다. 우리는 2021년에 이를 확장하기 위해 OpenCollective와 협력해 왔으며 곧 발표할 추가 자금이 있을 것입니다.

— Addy Osmani(@addyosmani) 2020년 9월 12일

이것이 TechSEO에 의미하는 바

TechSEO 실무자가 자신의 직업에서 탁월하기 위해 개발자가 될 필요는 없다는 것은 사실입니다. 또한 코딩에 대해 조금 배우고 최소한 Google Lighthouse의 세부 사항을 가능한 한 많이 이해함으로써 개발자가 겪는 어려움에 더 익숙해질수록 개발자에게 문제와 실용적인 솔루션을 더 잘 전달할 수 있는 것도 사실입니다. .

MomentJS를 도매로 교체하는 것은 매우 쉬운 것부터 교체가 필요하다는 소식을 받는 사람을 위한 엄청나게 복잡한 것까지 어디에서나 가능합니다. 개발자가 아니거나 최신 JavaScript 라이브러리 및 프레임워크를 사용하여 약간의 웹 개발을 시도해 본 적이 없는 한 Moment와 같은 라이브러리를 더 작은 대안으로 전환하는 것이 얼마나 고통스러운지 알기 어려울 것입니다. 특정 프로젝트.

해당 라이브러리가 코드베이스에 얼마나 통합되었는지와 관련이 있습니다. 코드 패턴은 애플리케이션 전체에서 완전히 다시 작성해야 할 수 있습니다. 애플리케이션 코드베이스가 더 크고 더 많이 상호 연결될수록 교체를 수행하기가 더 어려워집니다. "Google에서 대신 사용하라고 지시하는 대체 라이브러리 중 하나를 사용하세요."라고 말하는 것처럼 항상 간단한 것은 아닙니다.

Moment를 대체해야 한다는 것을 배울 때 발생할 수 있는 두려운 생각 중 하나는 라이브러리의 개체가 변경 가능(변경 가능)하도록 작성되었다는 사실에서 비롯됩니다. 이 패턴을 유지하는 것은 이전 버전과의 호환성을 위해 필요한 것으로 간주되며 이는 Moment를 다른 라이브러리로 교체하는 것을 실제로 복잡하게 만듭니다. 호출 체인의 어딘가에서 Moment를 사용하여 할당된 변수 값을 응용 프로그램 코드베이스 내에서 변경할 수 없는 값으로 계산할 수 없다는 사실을 응용 프로그램에서 수용하려면 전체 코드 블록을 작성해야 할 수 있습니다.

최신 라이브러리의 불변 객체에 의존하는 현대적인 패턴이 더 안정적입니다. 거기에 도달하려면 Moment가 사용되는 모든 인스턴스를 다시 작성해야 할 수 있습니다.

개발자를 위한 SEO

프로덕션을 위해 JavaScript를 작업으로 최적화하는 것은 TechSEO가 코드 작업을 하거나 SEO에 익숙하지 않을 수 있는 개발자에게 피드백을 제공하는 것과 매우 유사합니다. 개발자는 먼저 성능 최적화를 이해해야 하기 때문입니다. 개발자가 BundlePhobia, Lighthouse 또는 SEO에 대해 알고 있다고 가정할 수 없습니다.

여기까지 했고 고객에게 더 나은 서비스를 제공하기 위해 코딩에 대해 더 알고 싶다면 운이 좋은 것입니다. 올해 우리는 SMX 컨퍼런스 시리즈의 선택적 추가 기능으로 개발자 워크샵을 위한 SEO를 제작할 예정입니다. 제시된 정보는 TechSEO 실무자로서 어디에 있든, 우리의 집합적인 경로가 코딩으로 이끄는 곳까지 여정을 안내하는 것을 목표로 합니다. 일이 얼마나 빨리 진행되는지 감안할 때 하늘의 한계입니다!