오늘날 브라우저에서 ES 모듈을 사용합니다

브라우저에서 ES 모듈 사용 : 현재 상태 및 향후

코어 포인트 :

es6 (ES2015)은 JavaScript 기본 모듈 표준을 도입했지만 처음에는 열악한 브라우저 지원 개발자가 모듈 로더를 사용하여 종속성을 단일 ES5 호환 브라우저 파일로 번들로 번들로 만들었습니다.

Safari, Chrome, Firefox 및 Edge와 같은 주류 브라우저는 이제 ES6 모듈의 구문을 지원하므로보다 효율적이고 표준화 된 코드 구조가 가능합니다. ES6 모듈의 지원이 계속 개선되고 있지만 Babel 및 Webpack과 같은 도구는 브라우저가 계속 최적화되어 필수 불가결합니다. HTTP2의 다중 재료 스트리밍 기능과 브라우저 프리 로딩 기능을 결합한 ES 모듈은 상당한 성능을 향상시킬 것으로 예상됩니다.

이제 번역기 나 번들러가 필요하지 않고 최신 브라우저에서 ES 모듈을 직접 사용할 수 있지만 이전 브라우저에 대한 별도의 패키지를 만드는 것이 좋습니다. 점점 더 많은 라이브러리가 ES 모듈로 출시되기 시작했지만 여전히 직접 수입보다는 번들러를 대상으로합니다.

• 이 기사에서는 오늘날 브라우저에서 ES 모듈을 사용하는 방법을 보여줍니다.
최근 이전에 JavaScript에는 모듈 개념이 없었습니다. JavaScript 파일을 다른 파일에 직접 참조하거나 포함시키는 것은 불가능합니다. 응용 프로그램 크기와 복잡성이 커짐에 따라 브라우저에 대한 JavaScript를 쓰는 것이 까다로워집니다.
• 일반적인 솔루션은 import를 사용하는 것입니다
또는 외부 스크립트 :
• 간단히
를 추가하십시오

요구 사항

추출에

프로토콜에서 작동하지 않기 때문에 를 사용하려면 서버가 필요합니다. 로컬 테스트를 위해 현재 디렉토리에서 서버를 시작하려면

를 사용하여 서버를 시작할 수 있습니다.

다른 도메인에 ES 모듈을로드하려면 CORS를 활성화해야합니다. 지금 프로덕션에서 이것을 시도 할만 큼 대담한 경우, 오래된 브라우저에 대해 별도의 패키지를 만들어야합니다. 폴리 필은 사양을 따르는

// html.js
export function tag (tag, text) {
  const el = document.createElement(tag)
  el.textContent = text

  return el
}

로 제공됩니다. 그러나 이것은 생산 환경에 전혀 권장되지 않습니다.

<🎜 🎜> <<> 성능

<🎜>

브라우저는 여전히 추출 최적화 방법을 구현하고 있기 때문에 바벨 및 웹 팩과 같은 빌드 도구를 즉시 버리지 마십시오. 그럼에도 불구하고, 향후 ES 모듈의 사용에는 여전히 성능 함정과 장점이 있습니다.

// app.js
import { tag } from './html.js'

const h1 = tag('h1', '? Hello Modules!')
document.body.appendChild(h1)

왜 우리는

를 바인딩 해야하는 이유 오늘, 우리는 네트워크가 일반적으로 웹 페이지로드의 가장 느린 부분이기 때문에 발행 된 HTTP 요청 수를 줄이기 위해 JavaScript를 번들로 묶습니다. 이것은 오늘날에도 여전히 매우 효과적인 질문이지만 미래는 밝습니다. ES 모듈은 HTTP2의 다중 자원 스트리밍 기능과 브라우저 사전로드 기능을 결합합니다. type="module"<<> 예압 <🎜 🎜>

<<> 근처의 브라우저에 나타납니다. 브라우저는 모든 모듈을 하나씩 구문 분석 할 필요가 없으므로 아래에 표시된 네트워크 폭포를 생성합니다 ...

link rel="modulepreload" 당신은 브라우저 페이지에 <🎜 🎜> 및

를 미리 알림으로써 폭포를 제어 할 수 있습니다.

// html.js
export function tag (tag, text) {
  const el = document.createElement(tag)
  el.textContent = text

  return el
}

http2 및 서버 푸시

<🎜>

http2는 하나의 리소스 만 전송할 수있는 http1.1에 비해 단일 응답으로 여러 리소스를 푸시 할 수 있습니다. 이것은 네트워크 라운드 트립을 최소화하는 데 도움이됩니다.

<,>이 예에서는 <🎜 html.js, <🎜 lib.js> 단일 요청으로 전달 될 수 있습니다. --- & gt;

캐시 <🎜 🎜> 여러 개의 작은 ES 모듈을 전달하면 브라우저가 변경된 모듈 만 추출하면 캐시에 도움이 될 수 있습니다. 큰 패키지를 생성하는 데있어 문제는 코드 줄을 변경하면 전체 패키지가 무효화된다는 것입니다.

// app.js
import { tag } from './html.js'

const h1 = tag('h1', '? Hello Modules!')
document.body.appendChild(h1)

/

es 모듈은 기본적으로 렌더링을 차단하지 않습니다. 필요한 함수 만 가져 오면 요청 수가 119

: 로 줄어 듭니다.

이것은 Lodash-ES가 브라우저에서 직접로드하도록 만들어지지 않았다는 것을 보여주는 예일뿐입니다. 이렇게하려면 ES 모듈을 대상으로 사용하여 고유 한 패키지를 만들어야합니다. index.html app.js (여기에 es6 모듈 양식을 삽입해야 할 수 있습니까?) 이제 브라우저에서 ES 모듈 실험을 시작해야합니다. 곧 번역기 나 번들러없이 모든 현대식 브라우저에서 사용할 수 있습니다 (원하는 경우). html.js (FAQ 부분은 여기에 삽입되어야합니다. 내용은 원본 텍스트와 동일)

위 내용은 오늘날 브라우저에서 ES 모듈을 사용합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!