programing

.js 파일 대 CDN 번들링

skycolor 2023. 10. 29. 19:09
반응형

.js 파일 대 CDN 번들링

웹 페이지의 성능을 향상시키기 위해서는 CDN을 사용하여 서비스를 제공하는 것이 좋습니다..js우리 웹 페이지에 있는 파일들.일리 있는 말이야.

또한, 우리는 우리의 제품을 묶는 것을 추천합니다..js로드 중인 서버에 대한 요청 수를 줄이기 위해 파일을 저장합니다.

그래서 우리는 앉아서 CDN을 사용할지 번들을 사용할지 결정해야 합니다..js서류철

장단점은 무엇입니까?어떤 것이 더 말이 됩니까?

묶어서 배치하지 못하고 CDN만 배치하는 거죠?이것은 어느 한 쪽의 결정이 되어서는 안 되는 것입니까?

하나를 선택해야 하는 경우, 몇 개를 선택하느냐에 따라 달라집니다..js포함하고 있는 파일입니다.적은 수의 파일의 경우 CDN이 더 빠르고, 더 많은 수의 파일의 경우 번들이 빠릅니다..js확실히 파일이 더 빠를 겁니다.스위치 오버가 어디에 있는지는 실험해 볼만한 것입니다.

제 대답은 둘 다 입니다.그것들을 묶어서 CDN에 놓습니다.

이렇게 하는 것의 단점은?경우에 따라 다르지요.프로세스는 어떤 형태로 구축됩니까?번들링 및 최소화를 쉽게 자동화할 수 있습니까?Yahoo YUI나 Google Closure 등을 사용하고 계십니까?

또한 GUI 의존 jQuery가 많은 경우 요소/효과/css가 계속 변경되어 시간 소모성 마찰이 발생할 수 있습니다.

가능한 최소화 이상 때문에 테스트도 중요합니다.

결론: javascript 파일 5개를 하나의 파일에 안전하게 묶어서 === 4개의 요청이 적습니다.

기존의 일반적인 html과 외부 자바스크립트 참조 === 서버로의 요청 2개만 있는 페이지.단, 기존의 일반적인 html과 CDN의 외부 자바스크립트 참조 하나만 있는 페이지 === 서버에 대한 1개의 요청.

현재 Google Closure 도구를 사용하고 있습니다.Google Closure Inspector는 다음과 같은 기능을 지원합니다.

Closure Compiler는 원본 자바스크립트 코드를 수정하고 원본보다 작고 효율적이지만 읽고 디버깅하기 어려운 코드를 생성합니다.Closure Inspector는 컴파일된 코드에 해당하는 원본 소스 코드의 줄을 식별하는 소스 매핑 기능을 제공하는 데 도움이 됩니다.

다른 사람들이 이미 말했듯이, 답은 가능하다면 둘 다입니다.묶음(및 최소화)은 페이지 무게를 줄여주기 때문에 사용자에게 이점을 줍니다.CDN은 작업을 오프로드하기 때문에 서버에 도움이 됩니다.일반적으로 성능 문제를 관찰했거나 더 이상 할 일이 없는 한 최적화할 필요가 없습니다.

당신이 생각해야 할 것이 몇 가지 있습니다...

페이지 로드 초기에 JS를 얼마나 로드해야 하고, 나중까지 얼마나 지연시킬 수 있습니까?

Google Analytics처럼 JS 로드를 지연하거나(예: 페이지 하단에 입력) 비동기적으로 로드할 수 있다면 JS를 다운로드하는 데 걸리는 시간을 최소화하여 UI 스레드를 차단할 수 있습니다.

JS의 부하를 분할할 수 있는 방법을 알아낸 후, 다양한 JS 파일의 병합/최소화를 다루겠습니다. HTTP 요청을 줄이는 것이 성능 향상의 핵심입니다.

그런 다음 CDN으로 이동하여 CDN이 압축된 JS 콘텐츠를 제공할 수 있는지 확인하고 "영원히 캐시"되도록 헤더를 설정할 수 있는지 확인합니다(영원히 캐시하는 경우 파일 버전을 변경해야 함).CDN은 대기 시간을 줄이는 데 도움이 되지만 쿠키가 없어서 크기를 줄일 수도 있습니다.

정적 컨텐츠에 대해 별도의 도메인을 설정하고 분류하는 동안 서버를 가리키고 가치가 있을 경우 CDN으로 전환하는 것도 고려해 볼 수 있습니다.

앤디

언급URL : https://stackoverflow.com/questions/7445909/bundling-js-files-vs-cdn

반응형