자바 스크립트 코드 분할에 대해 알아야 할 모든 것

자바 스크립트 코드 분할

최신 사이트는 종종 모든 자바 스크립트를 하나의 큰 main.js 스크립트. 여기에는 사용자가보고있는 페이지의 작은 부분 만 필요하더라도 모든 페이지 또는 경로에 대한 스크립트가 정기적으로 포함됩니다.

자바 스크립트가 이러한 방식으로 제공되면 웹 페이지의 로딩 성능이 저하 될 수 있습니다. 특히 반응 형 웹 디자인 모바일 장치에서. 이제 JavaScript 코드 분할을 구현하여 수정 해 보겠습니다.

  • 더 빠르고 가벼운 자바 스크립트 코딩 방법

코드 분할은 어떤 문제를 해결합니까?

웹 브라우저에 참조하는 JavaScript를 다운로드하고 처리하는 데 시간을 소비해야합니다. 이것은 고급 장치에서 빠르게 느껴질 수 있지만 사용되지 않는 JavaScript 코드를로드, 구문 분석 및 실행하는 것은 네트워크 속도가 느리고 CPU가 느린 평균 모바일 장치에서는 시간이 걸릴 수 있습니다. 커피 숍이나 호텔 Wi-Fi에 로그온해야했다면 네트워크 속도가 느려질 수 있습니다.



부팅이 완료 될 때까지 자바 스크립트를 기다리는 데 1 초를 소비하면 사용자가 경험과 상호 작용할 수있는 시간이 지연 될 수 있습니다. 특히 UX가 중요한 구성 요소를 위해 JS에 의존하거나 단순한 UI를 위해 이벤트 핸들러를 첨부하는 경우에 특히 그렇습니다.

코드 분할에 신경을 써야합니까?

코드 분할이 필요한지 스스로에게 물어볼 가치가 있습니다 (단순한 웹 사이트 빌더 당신은 아마). 사이트에서 대화 형 콘텐츠 (메뉴 드로어 및 캐 러셀과 같은 기능의 경우)에 JavaScript가 필요하거나 UI를 렌더링하기 위해 JavaScript 프레임 워크에 의존하는 단일 페이지 애플리케이션 인 경우 대답은 '예'일 가능성이 높습니다. 코드 분할이 사이트에 가치가 있는지 여부는 스스로 대답해야하는 질문입니다. 아키텍처와 사이트가 가장 잘로드되는 방식을 이해합니다. 고맙게도 여기에 도움이되는 도구가 있습니다. 디자인 시스템 전반에 걸쳐 변경 사항을 구현하는 경우 해당 변경 사항을 공유 클라우드 스토리지 팀이 볼 수 있습니다.

태블릿에서 그리기에 좋은 스타일러스

도움 받기

JavaScript 코드 분할을 처음 접하는 분들을 위해 등대 – Chrome 개발자 도구의 감사 패널 – 이것이 사이트에 문제가 있는지 여부를 밝히는 데 도움이 될 수 있습니다. 찾고자하는 감사는 자바 스크립트 실행 시간 감소 (문서화 됨)입니다. 여기 ). 이 감사는 사용자의 상호 작용을 지연시킬 수있는 페이지의 모든 스크립트를 강조합니다.

PageSpeed ​​인사이트 은 사이트 성능을 강조 할 수있는 온라인 도구이며 Lighthouse의 실험실 데이터와 Chrome 사용자 환경 보고서의 사이트 성능에 대한 실제 데이터를 포함합니다. 너의 웹 호스팅 서비스에는 다른 옵션이있을 수 있습니다.

Chrome 개발자 도구의 코드 범위

더 잘 나눌 수있는 값 비싼 스크립트가있는 것 같으면 다음으로 살펴볼 도구는 Chrome 개발자 도구의 코드 커버리지 기능입니다 (DevTools> 오른쪽 상단 메뉴> 추가 도구> 커버리지). 이는 페이지에 사용되지 않은 JavaScript (및 CSS)의 양을 측정합니다. 요약 된 각 스크립트에 대해 DevTools는 '사용되지 않은 바이트'를 표시합니다. 이것은 사용자가 필요로 할 때 분할 및 지연로드를 고려할 수있는 코드입니다.

다양한 종류의 코드 분할

자바 스크립트 코드 분할과 관련하여 취할 수있는 몇 가지 다른 접근 방식이 있습니다. 이러한 항목이 사이트에 얼마나 적용되는지는 페이지 / 애플리케이션 '로직'을 분할할지 아니면 다른 '공급 업체'에서 라이브러리 / 프레임 워크를 분할할지에 따라 달라지는 경향이 있습니다.

동적 코드 분할 : 우리 중 다수는 '정적으로'자바 스크립트 모듈과 종속성을 가져 와서 빌드시 하나의 파일로 함께 묶습니다. '동적'코드 분할은 필요에 따라 분할하고 지연로드하려는 JavaScript의 지점을 정의하는 기능을 추가합니다. 최신 JavaScript는 동적 수입() 이를 달성하기위한 성명. 이에 대해서는 곧 더 다루겠습니다.

공급 업체 코드 분할 : 의존하는 프레임 워크 및 라이브러리 (예 : React, Angular, Vue 또는 Lodash)는 종종 사이트의 '로직'으로 사용자에게 보내는 스크립트에서 변경 될 가능성이 낮습니다. 사이트를 다시 방문하는 사용자에 대한 캐시 무효화의 부정적인 영향을 줄이기 위해 '공급 업체'를 별도의 스크립트로 분할 할 수 있습니다.

진입 점 코드 분할 : 항목은 Webpack과 같은 도구가 종속성 트리를 구축하기 위해 살펴볼 수있는 사이트 또는 앱의 시작점입니다. 항목 별 분할은 클라이언트 측 라우팅이 사용되지 않거나 서버 및 클라이언트 측 렌더링 조합에 의존하는 페이지에 유용합니다.

이 기사의 목적을 위해 동적 코드 분할에 집중할 것입니다.

코드 분할로 실습

자바 스크립트 성능을 최적화합시다. 세 개의 숫자를 정렬하는 간단한 응용 프로그램 코드 분할을 통해 – 이것은 제 동료 Houssein Djirdeh의 앱입니다. JavaScript를 빠르게로드하기 위해 사용할 워크 플로는 측정, 최적화 및 모니터링입니다. 여기서 시작 .

성능 측정

최적화를 추가하기 전에 먼저 JavaScript의 성능을 측정 할 것입니다. Magic Sorter 앱은 Glitch에서 호스팅되므로 코딩 환경을 사용할 것입니다. 이에 대한 방법은 다음과 같습니다.

  • 라이브 표시 버튼을 클릭합니다.
  • CMD + OPTION + i / CTRL + SHIFT + i를 눌러 DevTools를 엽니 다.
  • 네트워크 패널을 선택하십시오.
  • 캐시 비활성화가 선택되어 있는지 확인하고 앱을 다시로드하십시오.

이 간단한 응용 프로그램은 몇 가지 숫자를 정렬하기 위해 71.2KB의 JavaScript를 사용하는 것 같습니다. 그것은 확실히 옳지 않은 것 같습니다. 우리 소스에서 src / index.js , Lodash 유틸리티 라이브러리를 가져 와서 정렬 기준 -정렬 유틸리티 중 하나-우리의 숫자를 정렬하기 위해. Lodash는 몇 가지 유용한 기능을 제공하지만 앱은 하나의 방법 만 사용합니다. 실제로 일부만 사용해야하는 경우 타사 종속성을 모두 설치하고 가져 오는 것은 일반적인 실수입니다.

번들 최적화

JavaScript 번들 크기를 줄이는 데 사용할 수있는 몇 가지 옵션이 있습니다.

캐릭터 디자인 포트폴리오를 만드는 방법
  1. 타사 라이브러리에 의존하는 대신 사용자 지정 정렬 방법을 작성합니다.
  2. 사용하다 Array.prototype.sort () , 브라우저에 내장되어 있습니다.
  3. 가져 오기만 정렬 기준 전체 라이브러리 대신 Lodash의 메소드.
  4. 사용자가 필요로하는 경우 (단추를 클릭 할 때) 정렬 용 코드 만 다운로드하십시오.

옵션 1과 2는 번들 크기를 줄이는 데 적합합니다. 이는 실제 애플리케이션에 적합 할 것입니다. 교육 목적으로 우리는 다른 것을 시도 할 것입니다. 옵션 3과 4는 응용 프로그램의 성능을 향상시키는 데 도움이됩니다.

필요한 코드 만 가져옵니다.

하나만 가져 오도록 몇 개의 파일을 수정합니다. 정렬 기준 Lodash에서 필요한 방법입니다. 교체부터 시작하겠습니다. Lodash 의존 package.json :

'lodash': '^4.7.0',

이것으로 :

'lodash.sortby': '^4.7.0',

src / index.js에서이보다 구체적인 모듈을 가져옵니다.

js import './style.css'; import _ from 'lodash'; import sortBy from 'lodash.sortby';

다음으로 값이 정렬되는 방식을 업데이트합니다.

js form.addEventListener('submit', e => { e.preventDefault(); const values = [input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber]; const sortedValues = _.sortBy(values); const sortedValues = sortBy(values); results.innerHTML = `

${sortedValues}

` });

매직 넘버 앱을 다시로드하고 개발자 도구를 열고 네트워크 패널을 다시 확인합니다. 이 특정 앱의 경우 거의 작업없이 번들 크기가 4 단계로 축소되었습니다. 그러나 여전히 개선의 여지가 많습니다.

자바 스크립트 코드 분할

Webpack은 오늘날 웹 개발자가 사용하는 가장 인기있는 JavaScript 모듈 번 들러 중 하나입니다. 모든 JavaScript 모듈과 기타 자산을 웹 브라우저가 읽을 수있는 정적 파일로 '번들'(결합)합니다.

이 애플리케이션의 단일 번들은 두 개의 개별 스크립트로 분할 될 수 있습니다.

  • 하나는 초기 경로를 구성하는 코드를 담당합니다.
  • 다른 하나에는 정렬 코드가 포함되어 있습니다.

동적 가져 오기 사용 ( 수입() 두 번째 스크립트는 요청시 지연로드 될 수 있습니다. 매직 넘버 앱에서는 사용자가 버튼을 클릭 할 때 필요에 따라 스크립트를 구성하는 코드를로드 할 수 있습니다. 정렬 방법에 대한 최상위 가져 오기를 제거하여 시작합니다. src / index.js :

import sortBy from 'lodash.sortby';

버튼을 클릭하면 실행되는 이벤트 리스너 내에서 가져옵니다.

포토샵에서 반전을 선택하는 방법
form.addEventListener('submit', e => { e.preventDefault(); import('lodash.sortby') .then(module => module.default) .then(sortInput()) .catch(err => { alert(err) }); });

이 동적 수입() 우리가 사용하는 기능은 JavaScript 언어 표준에서 모듈을 동적으로 가져 오는 기능을 포함하기위한 표준 추적 제안의 일부입니다. Webpack은 이미이 구문을 지원합니다. 동적 가져 오기가 작동하는 방법에 대해 자세히 읽을 수 있습니다. 이 기사에서 .

그만큼 수입() 문이 해결되면 Promise를 반환합니다. Webpack은이를 별도의 스크립트 (또는 청크)로 나눌 수있는 분할 지점으로 간주합니다. 모듈이 반환되면 module.default 에서 제공하는 기본 내보내기를 참조하는 데 사용됩니다. Lodash . 약속은 다른 것과 연결되어 있습니다. .그때() 전화 sortInput 세 가지 입력 값을 정렬하는 방법. Promise 체인의 끝에서 .잡기() 오류의 결과로 Promise가 거부 된 곳을 처리하기 위해 호출됩니다.

실제 프로덕션 애플리케이션에서는 동적 가져 오기 오류를 적절하게 처리해야합니다. 여기에 사용 된 것과 유사한 단순 경고 메시지는 사용되는 메시지이며 사용자에게 문제가 있음을 알리는 데 최상의 사용자 경험을 제공하지 않을 수 있습니다.

'파싱 오류 : 가져 오기 및 내보내기가 최상위 수준에만 나타날 수 있습니다.'와 같은 Linting 오류가 표시되는 경우 아직 완료되지 않은 동적 가져 오기 구문 때문이라는 점을 알아 두세요. Webpack이이를 지원하지만 Glitch에서 사용하는 ESLint (JavaScript linting 도구) 설정은 아직이 구문을 포함하도록 업데이트되지 않았지만 여전히 작동합니다.

마지막으로해야 할 일은 sortInput 파일 끝에 메서드. 이것은 가져온 메소드를받는 함수를 반환하는 함수 여야합니다. lodash.sortBy . 중첩 함수는 세 가지 입력 값을 정렬하고 DOM을 업데이트 할 수 있습니다.

const sortInput = () => { return (sortBy) => { const values = [ input1.valueAsNumber, input2.valueAsNumber, input3.valueAsNumber ]; const sortedValues = sortBy(values); results.innerHTML = `

${sortedValues}

` }; }

숫자 모니터링

이제 마지막으로 애플리케이션을 다시로드하고 네트워크 패널을주의 깊게 살펴 보겠습니다. 앱이로드 될 때 작은 초기 번들 만 다운로드되는 방식을 확인해야합니다. 버튼을 클릭하여 입력 번호를 정렬하면 정렬 코드가 포함 된 스크립트 / 청크를 가져 와서 실행합니다. 우리가 예상하는대로 숫자가 어떻게 정렬되는지 보십니까?

자바 스크립트 코드 분할 및 지연 로딩은 앱 또는 사이트의 초기 번들 크기를 줄이는 데 매우 유용 할 수 있습니다. 이로 인해 사용자의 페이지로드 시간이 단축 될 수 있습니다. 바닐라 JavaScript 애플리케이션에 코드 분할을 추가하는 방법을 살펴 봤지만 라이브러리 또는 프레임 워크로 빌드 된 앱에도 적용 할 수 있습니다.

자바 스크립트 라이브러리 또는 프레임 워크를 사용한 지연 로딩

많은 인기있는 프레임 워크가 동적 가져 오기 및 Webpack을 사용하여 코드 분할 및 지연로드 추가를 지원합니다.

React를 사용하여 영화 '설명'컴포넌트를 지연로드하는 방법은 다음과 같습니다. React.lazy () 구성 요소가 지연로드되는 동안 '로드 중…'대체 기능을 제공합니다 (참조 여기 자세한 내용은) :

import React, { Suspense } from 'react'; const Description = React.lazy(() => import('./Description')); function App() { return (

My Movie

); }

코드 분할은 JavaScript가 사용자 경험에 미치는 영향을 줄이는 데 도움이 될 수 있습니다. 더 큰 JavaScript 번들이있는 경우 확실히 고려하고 의심스러운 경우 측정, 최적화 및 모니터링하는 것을 잊지 마십시오.

이 기사는 원래 317 호에 게시되었습니다. 그물 , 웹 디자이너와 개발자를위한 세계 베스트셀러 잡지입니다. 여기서 317 호 구매 또는 여기에서 구독하세요 .

관련 기사: