모든 페이지에 주요 자바 스크립트를로드 하시겠습니까? 아니면 관련 페이지로 분류합니까?

13

나는이 700kb모든 페이지에로드 압축 JS 파일을. 12각 페이지에 자바 스크립트 파일이 있지만 http 요청을 줄이기 전에 파일을 모두 압축했습니다 1 file.

이 파일은 ~130kb gzipped이상 제공됩니다 gzip. 그러나 로컬 컴퓨터에서는 여전히 압축을 풀고 모든 페이지에로드합니다. 이것이 성능 문제입니까?

방화범 프로파일 러로 자바 스크립트를 프로파일 링했지만 문제가 발생하지 않았습니다. 내가 직면하고있는 문제 / 환상은 때로는 현재 페이지에서 사용되지 않는 jquery 라이브러리가 해당 파일에 압축되어 있다는 것입니다.

예를 들어 jquery datatables는 200kb 압축되어 있으며 내 웹 사이트 페이지 중 2 개에만로드됩니다. 또 다른 것은 jqplot또 다른 것 200kb입니다.

이제 페이지 400kb에서 실행되지 않는 초과 코드가 80%있습니다.

모든 것을 하나의 파일로 남겨 두어야합니까?

jquery 라이브러리를 꺼내고 현재 페이지에서 관련 JS 만로드해야합니까?

— 카일
소스

700kb의 JS 코드가있는 경우 실제로 다시 분할해야하며 실제로 필요한 스크립트 만 포함해야합니다. 또한 jQuery ( "… 덜 쓰고 더 많은 것을…")를 사용하면 거대한 JS 파일을 갖는 것이 약간 큰 것처럼 보입니다. 대량의 JS로 무엇을하고 있습니까?

— feeela

@feeela는 jquery-ui, jquery.datatables를 살펴보십시오. 이것들만이 400kb입니다. jquery.validate, jquery.uniform과 같은 다른 플러그인도 있습니다. 이것이 추가됩니다. xD

— Kyle

이 경우 – 아래에서 언급

— 했듯이

6

requirejs 를 사용 하여 해당 페이지에만 필요한 라이브러리를 동적으로로드 할 수 있습니다 . 그런 다음 모든 페이지에 requirejs (약 14k) 만로드하면 약 385kb가 절약됩니다.

통합도 매우 쉽습니다. 필요한 코드를 "포장"하면 다음과 같습니다.

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
})

— 남자 이름
소스

1

나는 그 웹 사이트 디자인을 정말로 좋아한다. 나는 requirejs에 대해 들어 본 적이 없다. http 요청에 대해 어떻게 평가하십니까? 이것이 페이지에 더 많은 HTTP 요청을하지 않습니까? (나쁘지 않나요?) 바보 같은 질문에 대해 죄송합니다.

— Kyle

요청이 적을수록 좋습니다. 그러나 350k를 초과하는 것도 나쁘지 않습니다. 예, 해당 페이지에 다른 라이브러리를 포함하면 사이트에서 한 번 더 요청합니다. datatables한 사이트와 jqplot다른 사이트에 있다면 괜찮습니다. 페이지의 50 %에 5 개 이상의 라이브러리를로드하면 이점이 사라질 것입니다. 그러나 귀하의 경우, 나는 그것이 좋은 해결책이라고 생각합니다 (여러분의 js는 하나의 gzipped 파일을 유지한다고 가정합니다).

— Michael

고마워 마이클. 이 솔루션은 다소 훌륭합니다. 한 페이지에 모든 것을 쪼개기 전에 이건 내가 생각했던 것보다 낫습니다. 이 제안에 감사드립니다. requirejs에 대해 잘 알고 있기 때문에 requirejs로 충분하다고 생각하십니까? 일부 웹 사이트에서 Google을 사용하여 jquery 및 기타 라이브러리를로드하는 것을 보았습니다 google.load('...').

— Kyle

1

Google (또는이를 제공하는 다른 사이트)에서 공용 라이브러리를로드하는 것이 좋습니다. :이 두 장점을 가지고 A) lib 디렉토리 파일이 다른 사이트간에 캐시됩니다. 사용자가 이전에 사이트를 방문했으며 Google에서로드 한 jquery도 사용했을 수 있습니다. 이 파일은 다시 서버가 아닌 캐시에서로드됩니다! b)는 이 경우에도 이 로드 될, 그것은 당신의 자신의 웹 서버에서보다, 구글 CDN에서로드하는 것이 훨씬 빠를 것이다.

— Michael

8

프레임 워크 / CMS / 적절한 기능이있는 것이 있으면 @Michael이 제안한대로 추가 라이브러리없이 스크립팅을 조건부로 포함 할 수 있습니다.

예를 들어, WordPress는 다음과 같은 방법으로 상황을 처리 할 수 있습니다.

// For reference; this isn't functional code.
if (is_page('whatever')) {
    <script src="/path/to/datatables.js"><script>
    <script>
        [Your datatables setup here]
    </script>
}

RequireJS에는 아무런 문제가 없습니다. 추가 된 수준의 복잡성 (처음으로 그것을 사용하는 법을 배우는 것)이보다 쉽게 사용할 수있는 도구가 할 수있는 일을 상쇄하는지 여부를 평가하면됩니다. 위에서 언급 한 두 가지 사례 만있는 경우이 방법이 더 좋습니다. 더 많은 일이 진행되고 있다면 RequireJS가 전체적으로 더 나은 접근법 일 수 있습니다.

— 수
소스

themeforest에서 구입 한 html 템플릿으로 만든 맞춤 웹 사이트가 있습니다. 유일한 문제는 그 친구가 6 개의 JS 파일이 흩어져 있고 지저분하다는 것입니다. 그래서 그것들을 하나의 파일에 넣고 여기에는 jqplot, datatables, jquery-ui 라이브러리가 거의 없습니다. 그것들은 모두 약 550-600kb에 달합니다. 100kb는 해당 라이브러리를 사용하는 JS입니다. 모든 페이지에 관련이없는 JS 라이브러리를 너무 많이로드하는 대신 이것을 수정해야한다고 생각합니다. 당신의 제안에 감사드립니다! =)

— Kyle

5

700kb의 JavaScript는 페이지로드 후 구문 분석해야하므로 성능 문제입니다. 이 때문에 필요한 스크립트 만로드되도록주의해야합니다. 탐색이 단일 페이지를 떠나지 않고 내부적으로 처리 될 때 GMail과 같은 전체 AJAX 사이트에서 하나의 큰 JavaScript가 정상일 수 있습니다. 그러나 전체 AJAX 사이트에서도 동적 JS로드를 수행하여 시작시 불필요한 JS를로드하지 못하도록합니다 (메모리 및 속도 문제).

당신은 당신이 http 트래픽을 줄이고 싶다고 말했다. HTTP 캐싱으로 플레이해야합니다 . 문제는 만료 시간을 너무 높게 설정하면 캐시가 만료 될 때까지 JS 변경 사항이 표시되지 않을 수 있다는 것입니다.

트릭은 참조하지 않습니다, 그러나,있다 myscript.js,하지만 myscript.js?version={myversion}. 응용 프로그램 업데이트 후를 변경하면 {myversion}JavaScript를 강제로 다시로드합니다.

— 다 누비안 선원
소스

그러나이 정도의 JS 크기와 함께, 대부분 상당히 일반적인 라이브러리라는 사실과 함께 CDN을 사용하는 것이 큰 이점이 될 것입니다.

— Zhaph-Ben Duguid

1

~ 700kb의 JavaScript는 성능 문제이며 압축 된 경우 코드를 최적화하는 동안 준수해야 할 규칙은 다음과 같습니다.

자바 스크립트 축소-코드를 줄이지 않은 압축 및 압축 해제 만하면됩니다. 우선 좋은 Minify JS 도구를 사용하고 코드를 축소하십시오. 당신은 12 개의 파일을 가지고 있으며, 최고의 성능을 위해 클럽 활동을하기 전에 각 파일이 분리 될 것입니다.
비동기 로딩을 사용하면 매우 빠른로드 시간과 페이지 렌더링으로 비동기 자바 스크립트 로딩을 사용할 수 있습니다. 우수한 비동기 로딩은 렌더링 프로세스를 차단하지 않으며 느낌이 많은 페이지 로딩 시간이 크게 줄어들 기 때문에 사용자 영향이 매우 강합니다. 자바 스크립트가로드되지 않은 이미지 및 기타 표시된 항목은 정기적으로 표시됩니다.
JQUERY에 GOOGLE cdn을 사용하십시오 . JQUERY를 사용하고 자신의 웹 사이트에서로드하여 단점을 추가한다고 생각합니다. GOOGLE CDN (무료)을 사용하여 JQUERY를로드하십시오. 거의 모든 세 번째 웹 사이트에서 사용되고 있으므로 캐시의 클라이언트 컴퓨터에서 이미 사용할 수 있습니다.
Custom long Expires Headers : 로딩 시간 문제로 웹 사이트가로드되는 방법에 대해 매번 다운로드 할 수 없도록 HTTP JS 파일에 Long Expires를 제공해야하므로 두 번째 요청이 줄어 듭니다. 내 연구에 따르면, 두 번째 페이지에 걸리는 로딩 시간은 첫 페이지 방문에 비해 더 많은 이탈이 있습니다.
페이지 속도로 확인 : 때로는 다른 리소스가 페이지의 로딩 속도에 친절하게 영향을 미치고 다른 리소스도 최적화하려고 시도합니다. 모든 리소스에 약간의 단계를 밟으면 JS 로딩에 시간이 더 걸립니다.

— 비네 넷 1982
소스