하나의 파일에 여러 개의 Google 스크립트를로드 할 수 있습니다.

Question

하나의 파일에 여러 개의 Google 스크립트를로드하는 방법을 아는 사람이 있는지 궁금합니다. 보기 때문에 내 페이지 I 세 개 이상의 구글 스크립트까지로드하고있어 일부에 :

1. Google 웹 로그 분석
2. 구글 CSE
3. Google지도
4. (가끔) 구글 웹 글꼴

HTTP 요청을 줄이려고 시도했으며 그 중 모두를 포함하는 google.js과 같은 내용을로드하려고합니다.

Answer 1

Google의 결합 된 js 파일을 단일 http 요청으로 다운로드 할 수는 없지만 충분히 자주 업데이트한다면 자신의 웹 사이트를 다운로드, 결합 및로드 할 수 있습니다 (예 : 하루에 두 번 크론 작업과 같이) . 원하는 경우 캐싱 헤더를 설정할 수도 있습니다.

그럼에도 불구하고 나는 그것을 수행하는 것에 대한 조언을하고 싶다. - 스크립트를 비동기 적으로로드한다. (HTML 내에서, 별도의 파일이 아니다.) 비 블로킹이며 웹 사이트의 렌더링 시작을 늦추지 않을 것이다.

Answer 2

스크립트는 this example에서와 같이 스크립트를 비동기 적으로로드 할 수 있습니다. 다음

function loadScript(url) { 
     var script = document.createElement('script'); 
     script.type = 'text/javascript'; 
     script.src = url; 
     document.body.appendChild(script); 
     } 

과 :로드 기능은 같은 URL 매개 변수를 허용하도록 수정할 수 있습니다

var url = 'https://maps.googleapis.com/maps/api/js?sensor=false'; 
loadScript(url); 

var url = 'https://www.somedomain.com/someScript.js'; 
loadScript(url); 

// ...etc 

그런 다음 당신은 별도의 google.js 파일의 모든이를 넣을 수 있습니다. 그러나 필요에 따라 많은 스크립트를로드하는 것이 더 쉬워 질 수는 있지만 HTTP 요청을 줄이지는 못합니다.