대규모 JavaScript 앱 관리 및 배포 모범 사례

StackOverflow https://stackoverflow.com/questions/15390

문제

중대형 JavaScript 애플리케이션을 관리하기 위한 표준 사례는 무엇입니까?제가 우려하는 점은 브라우저 다운로드 속도와 개발 용이성 및 유지 관리 가능성입니다.

우리의 JavaScript 코드는 대략 다음과 같이 "네임스페이스"로 지정됩니다.

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

현재 웹 애플리케이션의 모든 비즈니스 로직을 처리하기 위한 하나의(압축 해제, 제거 해제, 읽기 쉬운) JavaScript 파일이 있습니다.또한 jQuery와 여러 jQuery 확장이 있습니다.우리가 직면한 문제는 시간이 걸린다는 것입니다. 영원히 JavaScript 코드에서 무엇이든 찾으려면 브라우저에 다운로드할 파일이 여전히 12개 있습니다.

하나의 최종 압축 JavaScript 파일로 "컴파일"되는 소수의 "소스" JavaScript 파일을 갖는 것이 일반적입니까?다른 유용한 힌트나 모범 사례가 있나요?

도움이 되었습니까?

해결책

제가 찾은 접근 방식은 각 클래스에 대해 별도의 JS 파일을 갖는 것입니다(Java, C# 및 기타에서와 마찬가지로).또는 탐색하기가 더 쉬운 경우 JS를 애플리케이션 기능 영역으로 그룹화할 수 있습니다.

모든 JS 파일을 하나의 디렉토리에 넣으면 서버 측 환경(예: PHP)이 해당 디렉토리의 각 파일을 반복하여 출력하도록 할 수 있습니다. <script src='/path/to/js/$file.js' type='text/javascript'> 모든 UI 페이지에 포함된 일부 헤더 파일에 있습니다.정기적으로 JS 파일을 생성하고 제거하는 경우 이 자동 로딩이 특히 편리하다는 것을 알게 될 것입니다.

프로덕션에 배포할 때 모든 항목을 하나의 JS 파일로 결합하고 크기를 줄이기 위해 "축소"하는 스크립트가 있어야 합니다.

다른 팁

또한 Google의 AJAX 라이브러리 API 외부 라이브러리를 로드하기 위해.

주요 JavaScript 라이브러리를 번들로 묶고 항상 압축 버전을 사용하여 더 쉽게 배포, 업그레이드하고 더 가볍게 만드는 Google 개발자 도구입니다.

또한 프로젝트에서 이러한 라이브러리 파일을 다운로드, 복사 및 유지 관리할 필요가 없기 때문에 프로젝트가 더 간단하고 가벼워집니다.

다음과 같이 사용하세요.

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

CSS 및 JavaScript 전달을 최적화하는 방법에 대해 Flickr로 유명한 Cal Henderson이 쓴 비타민 관련 훌륭한 기사가 있습니다. http://www.iamcal.com/serving-javascript-fast/

사이드노드 - Steve가 이미 지적했듯이 JS 파일을 실제로 "축소"해야 합니다.JS에서는 공백이 실제로 중요합니다.수천 줄의 JS가 있고 필요하지 않은 줄 바꿈만 제거하면 이미 약 1K를 저장한 것입니다.나는 당신이 요점을 이해한다고 생각합니다.

이 작업을 위한 도구가 있습니다.그리고 "축소화"/제거/난독화된 JS를 직접 수정해서는 안 됩니다!절대!

대규모 자바스크립트 애플리케이션에서는 모든 코드를 작은 별도의 파일('클래스' 또는 기능 그룹당 하나의 파일)로 작성하고 일종의 Java 네임스페이스/디렉토리 구조를 사용합니다.그런 다음 다음을 수행합니다.

  • 다운로드 크기를 줄이기 위해 모든 코드를 가져와서 축소(JSMin 변형 사용)하는 컴파일 타임 단계
  • 항상 또는 거의 항상 필요한 클래스를 가져와서 큰 번들로 연결하여 서버로의 왕복 시간을 줄이는 컴파일 타임 단계
  • 요청 시 런타임에 나머지 클래스를 로드하는 '클래스 로더'입니다.

서버 효율성을 위해 모든 자바스크립트를 하나의 축소된 파일로 결합하는 것이 가장 좋습니다.

코드가 필요한 순서를 결정한 다음 단일 파일에 필요한 순서대로 축소된 코드를 배치합니다.

핵심은 페이지를 로드하는 데 필요한 요청 수를 줄이는 것입니다. 따라서 제작을 위해 단일 파일에 모든 자바스크립트가 있어야 합니다.

개발을 위해 파일을 분할한 다음 모든 것을 결합/컴파일하는 빌드 스크립트를 만드는 것이 좋습니다.

또한 경험상 JavaScript를 페이지 끝부분에 포함시키는 것이 좋습니다.JavaScript가 헤더(또는 페이지 초기)에 포함되어 있으면 파이프라인이 켜져 있더라도 로드될 때까지 다른 모든 요청이 수행되지 않습니다.페이지 끝 부분에 있으면 이 문제가 발생하지 않습니다.

다른 (좋은) 자바스크립트 앱의 코드를 읽고 그들이 어떻게 처리하는지 살펴보세요.하지만 저는 수업당 하나의 파일로 시작합니다.하지만 제작 준비가 완료되면 파일을 하나의 큰 파일로 결합하고 축소합니다.

파일을 결합하지 않는 유일한 이유는 모든 페이지의 모든 파일이 필요하지 않기 때문입니다.

내 전략은 두 가지 주요 기술로 구성됩니다.AMD 모듈(수십 개의 스크립트 태그 방지) 및 모듈 패턴(애플리케이션 부분의 긴밀한 결합 방지)

AMD 모듈:매우 간단합니다. 여기를 참조하세요. http://requirejs.org/docs/api.html 또한 앱의 모든 부분을 하나의 축소된 JS 파일로 패키징할 수 있습니다. http://requirejs.org/docs/optimization.html

모듈 패턴:나는 이 라이브러리를 사용했습니다: https://github.com/flosse/scaleApp 지금 이게 뭐냐고 묻는 거야?자세한 내용은 여기를 참조하세요: http://www.youtube.com/watch?v=7BGvy-S-Iag

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top