Angular 4+ 앱에서 구성 요소별 모듈을 만들어야 합니까?

Angular 4+ 앱에서 구성 요소별 모듈을 만들어야 합니까?

저희는 Angular 4 애플리케이션(+-150 구성품)을 중간 크기로 가지고 있습니다.

이러한 구성 요소 중 대부분은 서비스 클래스를 주입해야 하며 앱의 다른 구성 요소에 대한 선언이 필요합니다.

우리가 실험해 왔고, 훨씬 더 개발자 친화적이라는 것을 알게 된 접근 방식은 구성 요소별로 모듈을 만드는 것입니다.모듈은 자식 구성 요소 모듈을 가져오고 구성 요소에 필요한 모든 서비스를 제공(또는 가져오기)합니다.또한 다른 구성 요소가 모듈을 통해 참조할 수 있도록 구성 요소 자체를 내보냅니다.

구성 요소의 구성이 간단해지고 구성 요소의 테스트 고정 장치를 매우 간단하게 설정할 수 있습니다(이전에는 종속성과 하위 구성 요소 트리 종속성의 반복이 많았던 부분입니다).
이 접근 방식은 구성 요소 기반 아키텍처와 일치하는 것으로 보이며 구성 요소 의존성이 무엇인지에 대한 캡슐화 형태를 허용합니다.
사실이기엔 너무 기분이 좋아요 ;)

제 질문은 이렇게 많은 모듈을 사용하는 것의 성능(또는 다른) 영향은 무엇인가 하는 것입니다.

저는 각 구성요소당 모듈 하나가 당신의 Angular 앱을 설계하는 가장 좋은 방법이라고 생각합니다.

다른 구성 요소에 의존하는 경우, 직접 종속성이며 간접 종속성을 신경 쓸 필요가 없는 각 구성 요소와 관련된 구성 요소 모듈만 포함할 수 있습니다.

처음에는 작업이 더 많은 것처럼 보일지도 모르지만, 그것은 여러분에게 보답할 것이고, 유지보수 문제를 덜 줄 것입니다.

한다면ComponentA에 달려 있습니다ComponentB에 달려있습니다.ComponentC성:

ModuleC에 관련된ComponentC

ModuleB에 관련된ComponentB수입하는 것ModuleC

ModuleA에 관련된ComponentA수입하는 것ModuleB(직접 가져올 필요는 없습니다.ModuleC)

한다면ComponentB이제는 에 달려있습니다ComponentD(포함하는것처럼<my-component-d>템플릿에서)에 따라 중지됩니다.ComponentC당신은 그냥 변합니다.ModuleB에 의존하는 모든 구성 요소.ComponentB이 방법을 사용한다면 잘 작동할 것입니다.

수백 개의 구성 요소에 대해 지금 생각해 보십시오.몇 개의 구성요소에 의존할 것인가?ComponentB?

이 문제는 스크립트 태그에 js 파일을 포함하는 이전 방식(또는 너무 오래되지 않음)과 유사하다고 생각합니다.

<script src="build/a.js"></script>
<script src="build/b.js"></script>
<script src="build/c.js"></script>

그리고 당신이 변한다면b의존하는 것을 멈추다c에 따라 시작합니다.d, 가져오는 모든 페이지b수입할 일이 있습니다d, 그 외에도 유지보수 악몽으로 이어질 수 있습니다.제거하는 것을 잊어버릴 수도 있습니다. (이제 불필요한)c.js일부 페이지에서 불필요하게 가져오기 때문에 부팅 시간이 증가하거나 가져오는 모든 파일에서 제거할 수 있습니다.b.js, 그러나 일부 페이지 가져오기e.js에 달려있습니다.c.js해당 페이지의 일부 기능을 손상시킵니다.

대신 다음을 가져오는 것이 훨씬 낫다고 생각합니다.

<script src="build/bundle.js"></script>

아니면

<script src="build/vendor.js"></script>
<script src="build/main.js"></script>

그리고 의존성은 모듈 번들러에 의해 처리됩니다.webpack.

구성 요소가 많은 모듈을 만들고 가져오기만 하면 되는 방식이 있지만 사용하지 않는 구성 요소를 여러 개 가져오게 되고 게으른 로딩을 사용하면 앱모듈에서 해당 모듈을 가져오지 않으면 모듈이 커져서 부팅 시간이 늘어날 수 있습니다.

기능 모듈을 사용하면 모듈당 하나의 구성 요소의 접근 방식을 사용할 수 있습니다.구성 요소 모듈을 (구성 요소 자체가 아닌) 피쳐 모듈로 가져오기만 하면 됩니다.

feature.module.ts:

imports: [
    ComponentAModule,
    ComponentBModule,
    ComponentCModule,
]

(수출도 하실 수 있습니다.)

또한 라이브러리를 만들 때 이 방법이 가장 좋은 방법이라고 생각합니다. 그렇지 않으면 라이브러리의 소비자가 라이브러리의 구성 요소를 1개 또는 2개만 사용하더라도 모든 구성 요소를 가져오도록 강제할 수 있습니다.

다음과 같은 문제가 발생합니다.ionic3: 미니어처, 미니어처ionic-angular도서관은 가지고 있습니다.437KB그중에서292KB구성 요소(hopefully와 함께 변경됨)ionic4 몇 합니다. 몇 개만 사용합니다.ionic구성품, 모두 가져올 필요는 없었지만, (리포트를 포크하거나 사용을 중단하지 않는 한) 선택의 여지가 없습니다.

나는 176개의 구성 요소가 있는 앱을 가지고 있는데 이것이 내 생각에 가장 좋은 접근 방법이었습니다.이전에는 기능 모듈에 여러 구성 요소를 포함시켰는데 나중에 두통이 생겼습니다.또한 기능 모듈에서 구성 요소를 다른 기능 모듈로 변경할 때 더 어려웠습니다(해당 종속성은 어떻게 됩니까?). 그것들은 모두 합쳐졌습니다).

서비스에 대한 만족스러운 접근 방법을 찾지 못했습니다(@Injectable() 터프( 합니다.

결국 결정은 당신에게 달려있습니다.이것은 저의 경험을 바탕으로 한 저의 의견입니다.

구글에서 처음으로 나온 결과인데다 끝없이 검색해보니 다른 사람들에게 전해줄 것이 있는 것 같아 답변을 덧붙이고 싶습니다.

하나의 영역을 제외한 모든 영역을 화면당 모듈로 작성하는 애플리케이션이 있습니다. 구성 요소는 아니지만 가깝습니다.

저는 최근에 게으른 모듈이 정말 도움이 되는지 알고 싶었습니다.

게으른 로딩

무트. 대부분의 앵글 앱은 이 질문을 받은 경우에도 PWA 또는 프리페칭을 사용하여 사용자가 최대한 많은 앱을 얻을 수 있도록 하며, 클라우드 프론트를 통해 프록시되는 S3 버킷과 같은 전송 소스에 대한 업데이트에서 부서진 번들로 인해 경험이 중단되지 않도록 합니다.

import() 기능을 사용하지 않으면 laze loading도 전혀 없습니다.따라서 다른 모듈에서 Import 속성을 사용하여 다른 모듈을 Import하는 것만으로는 실제로 로드가 게으르지 않습니다.

묶음크기

아니요. 모듈은 평균 포스트 컴파일 비용이 8kb이며 이러한 방식의 코딩을 유지하기 위해 내 앱이 최대 556kb까지 사용할 수 있는 27개의 모듈로 계산했습니다.

다운로드시간

또 안 돼요.게으른 로드 모듈 = 번들 및 번들 = 번들을 다운로드할 스레드입니다.실제로 당신은 코드가 고르게 퍼져있는 것을 원하지만 파일이 너무 크지 않아 각각 최대 600kb로 느린 3G 연결에서 쉽게 다운로드 할 수 있습니다.

렌더시간

이것은 사용자 기기에 따라 크게 달라지는데, 저는 여기서 확실한 테스트가 없지만, 여러분의 평균적인 휴대전화도 큰 앱을 쉽게 다룰 수 있어서 번들당 100개 이하의 구성요소라면 아마도 여러분의 앱을 다룰 수 있을 것입니다.

또한 모듈이 파일에 있고 JS 엔진에 의해 트랜스코딩되어 앱에 무게를 더한다는 것을 기억해야 합니다.

실제로 브라우저에서 두 가지 버전의 앱으로 10개(예, 매우 신뢰할 수는 없지만 빠른 버전)의 요청을 테스트했는데, 하나는 해당 앱의 마지막 부분에 게으른 모듈을 추가하도록 변경하고 (변경 사항 없음) 변경 사항이 있는 것이 없는 것보다 더 자주 반환되는 것을 발견했습니다.평균적으로 둘 사이에 막상막하였지만, 더 게으른 모듈이 장착된 모듈은 조금 더 느리게 돌아갔습니다.

SOC

예, 하지만 이것은 개발자의 느낌에 주관적입니다. 스캠과 같은 일부는 아무도 이해하지 못하는 미친 패러다임을 좋아하고, 어떤 방식으로든 SOC는 폴더의 끝없는 네스팅을 만드는 대신 모듈을 통해 구성 요소를 건전하게 분리함으로써 쉽게 달성될 수 있습니다.

결론

많은 사람들이 모듈을 사용하는 것에 대해 말하는 것을 믿지 않을 것입니다. 여러분은 스스로의 결정을 사용하고 사용자에게 미치는 영향을 고려해야 합니다.

조직과 성과의 중간 지점을 찾는 것이 가장 좋은 방법일 것입니다.

업데이트에 따라 Angular는 이제 독립 실행형 구성 요소 https://angular.io/guide/standalone-components 를 지원하며 곧 새로운 Angular 애플리케이션이 모듈을 사용하지 않고 코딩될 것입니다.

언급URL : https://stackoverflow.com/questions/46434830/should-i-create-a-module-per-component-in-angular-4-app