분산 소프트웨어 아키텍처에서 번들 최적화

Question

우리는 하나의 큰 응용 프로그램이 다른 배포 일정으로 다른 팀에서 관리하는 여러 각도 응용 프로그램으로 분할되는 아키텍처를 가지고 있습니다. ASP.NET 컨텍스트에서 이러한 개별 Angular 응용 프로그램은 서버에 배포되어 하나의 큰 응용 프로그램으로 실행됩니다. 모든 응용 프로그램은 별도의 응용 프로그램 풀에 배포되며 모두 동일한 레이아웃과 프레임 워크 코드를 사용합니다.

각 응용 프로그램은 AOT 컴파일러와 모듈 번들 (rollup 또는 webpack 2)을 사용하여 최적화 된 번들을 사용합니다. 각 응용 프로그램은 큰 응용 프로그램 (프레임 워크 코드)에서 중앙 집중화해야하는 중앙 집중식 Javascript 코드를 사용합니다. 이 코드는 또한 Angular 구성 요소를 사용하고 중앙 집중식 레이아웃 구성 요소, 웹 API 호출을 만드는 다중 각도 서비스 등을 포함합니다. 각 응용 프로그램에서 동일한 프레임 워크 코드를 사용합니다.

목표는 해당 프레임 워크 코드가 변경되면 단일 응용 프로그램을 다시 업데이트하고 배포해야한다는 것입니다.

내가 보는 표준 방법은 es2015 가져 오기가 사용되며 모듈 번들러가 가져 오기를 해석하고 필요한 코드 만 모듈에 추가하는 것입니다 (트리 떨림). 대부분 필요한 Angular 프레임 워크는 번들에도 포함되어 있습니다 (CDN을 사용하지 않음). 그러나이 경우가 3 자 제공 코드 :

• 각도 및 기타 벤더 코드
• 도 각도 사용하고 또한 번들
• 응용 프로그램을 제공하는 모든 응용 프로그램을 사용하는 중앙 집중식 맞춤형 frameworking 코드 자체가 하나의 번들을 제공합니다.

번들을 분할하고 최적화하려면 어떻게해야합니까?

• 는 중앙 frameworking 코드와 응용 프로그램이 기본 번들
  • 에서 제외 될 것 각도 물건을 사용하는 데 필요한 모든 각도/공급 업체 물건 별도의 번들을 확인 중앙 집중화하기 위해 CDN과 같은 방법을 사용하여

,536 : (번들의 각도 코드없이) 사용자 정의 frameworking 물건 및 참조 해당 번들은

그래서 당신은이 같은 끝낼 것

<script src="vendor-bundle.js"></script>
<script src="/central-location/frameworking-bundle.js"></script>
<script src="app-bundle.js">/script>;

이 특정한 경우에 가장 좋은 방법은 무엇입니까 ? 이런 종류의 아키텍처 설정에 대한 좋은 예는 찾을 수 없습니다.

Answer 1

그냥 건설의 이런 종류의 사용 <script src="vendor-bundle.js"></script> <script src="/central-location/frameworking-bundle.js"></script> <script src="app-bundle.js">/script>;

을 그리고 frameworking-bundle.js 수정 한 경우 파일을 다시 다운로드되어이 방법에 ETag를/마지막으로 수정 한 캐싱을 사용합니다. 사용자는 버전/해시/쿼리 문자열을 사용하지 않고 항상 최신 버전을 가져옵니다. 코드를 수정하지 않아도됩니다. https://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/

프레임 워크 코드는 공급 업체 코드를 제외해야하며 응용 프로그램에서 정의해야합니다. 예를 들어 Kendo가 JQuery를 필요로하는 것과 같은 방식으로.