앞에 쓰십시오
최근에 나는 직장에서 각도 모듈 식 포장으로 일부 컨텐츠 로딩을 발견했습니다. 나는 가운데에 약간의 함정이 있다고 느꼈으므로 여기에 표시했습니다.
프로젝트 배경 :
이 프로젝트는 주로 AngularJS를 프론트 엔드 프레임 워크로 사용합니다. 프로젝트가 전에 출시되면 모든 프론트 엔드 스크립트가 포장되어 파일로 압축됩니다. 페이지에 처음 액세스 할 때로드되어 페이지의 초기로드가 느려집니다. 이를 바탕으로 주문시로드 할 것을 제안합니다. 즉, 모듈의 스크립트는 사용자가 특정 모듈에 액세스 할 때만로드됩니다.
도구 :
이 프로젝트는 AMD 사양에 따라 Grunt 포장을 사용하고 Grunt-Contrib-RequireJS를 사용하여 모듈을 압축하고 병합하며 Oclazyload를 사용하여 각 모듈의 게으른 하중을 완료합니다.
프로젝트 프로세스 :
모듈 포장
프로젝트의 코드는 기본적으로 AMD 사양에 따라 작성되며 Grunt-Contrib-RequireJS는 각 모듈을 JS 파일로 압축하는 데 사용됩니다.
질문 1 : 프로젝트 코드에서 각 모듈은 프로젝트의 프로젝트/공개 지침에서 타사 라이브러리/공공 서비스에 의존합니다. 컨텐츠 의이 부분이 처리되지 않으면 Grunt-Contrib-RequireJS는 각 모듈을 압축 할 때 의존하는 모든 모듈을로드 한 다음 동일한 JS 파일로 압축합니다.
응답 : 타사 라이브러리/공공 서비스 및 지침을 세 가지 모듈로 압축 한 다음 각 모듈의 포장 스크립트에서 "제외"를 사용하여 제거하십시오. 아래 그림과 같이 :
공개 모듈의 모듈 이름에는 해당 경로에 동일한 이름의 JS 파일이 있어야합니다.
주문시로드
모듈별로 스크립트를 JS 파일로 포장 한 후 다음 단계는 사용자 요청에 따라 다른 모듈을로드하는 것입니다. 이 프로젝트는 UI-Router를 사용하여 라우팅 점프를 처리합니다. 경로에서 시작하여 모듈의 게으른 하중을 완료 할 수 있습니다.
특정 방법은 사용자가 경로 점프를 작동 할 때 사용자가 속한 모듈이 사용자가 점프하려는 상태에 따라로드됩니다. 이를 바탕으로 상태와 모듈 간의 매핑이 추가되어야합니다. 처음에는 requirejs로로드해야합니다. 스크립트를로드 할 수 있지만 각도에 등록 된 컨트롤러/서비스/필터는 작동하지 않습니다. 조사에 따르면 부트 스트랩 방법을 호출 한 후 Angular에 의해 등록 된 컨트롤러와 같은 서비스는 다시 호출되지 않습니다. 이를 기반으로 OCLAZYLOAD가로드에 도입됩니다 (Oclazyload는 각도 소스 코드에 대한 약간의 주입 및 변형이 있습니다).
지금까지, 주문형의 적재는 기본적으로 구현되었지만 여전히 몇 가지 문제가 있습니다.
모듈 간의 프로젝트 종속성
일부 모듈간에 프로젝트간에 강한 종속성이 있으므로 처리는 구성 파일의 모듈간에 종속성을 추가하는 것입니다. 모듈을로드하기 전에 종속 모듈이 있는지 확인하십시오. 그렇다면 종속 모듈이 먼저로드됩니다. 종속 모듈이로드되면 현재 모듈이로드됩니다.
지침의 게으른 부하;
각도에서 $ Compile은 지침 간의 상호 의존성을 구현하는 데 사용될 수 있습니다. 이것의 처리는 명령어 이름과 명령 모듈의 종속성을 구성하는 것입니다. 특정 명령을 사용하면 모듈이 먼저로드 된 다음 컴파일 메소드가 실행됩니다. 이 솔루션은 대부분의 교육 종속성을 해결할 수 있습니다.
지침의 위치. 대부분의 프로젝트는 긴 페이지를 사용하며 각 긴 페이지는 여러 영역으로 나뉘며 각 영역은 명령입니다. 가로 채기를 사용할 때, 즉 각 명령어의 로딩 시간이 다릅니다. 먼저 돌아 오는 명령은 먼저 DOM에 추가되어 페이지 레이아웃의 불확실성을 초래합니다. 해결책은 Deffer 메커니즘을 사용하는 것이며 모든 지침이로드/컴파일 된 후 DOM 트리에 실행을 추가하십시오.
지침 간의 종속성 : 지침간에 프로젝트 종속성도 있습니다. 이에 대한 해결책은 상호 의존적 지침을 모듈로 병합하여 동일한 스크립트 파일로 패키지하는 것입니다. 이 솔루션은 대부분의 명령어 종속성을 해결할 수 있지만 초기화 프로세스 중에 종속성을 해결할 수는 없습니다. 특정 명령어가 컴파일 될 수 있으며 명령에 대한 종속성은 아직 편집되지 않았습니다. 이러한 특별한 예제의 경우, 페이지가 초기화 될 때 스크립트와 템플릿 만로드됩니다.
위는 프로젝트 프로세스 전체에서 발생하는 문제입니다. 기본적으로 앞으로 나아갈 때마다 구덩이로 어려움을 겪고 있습니다. 많은 것들이 당신이 그들과 처음 접근 할 때, 나는 내가 무언가를 배웠다고 생각합니다. 많은 문제에 대한 솔루션은 명확하지 않을 수 있습니다. 다른 사람들은 위의 모든 문제를 만났습니다. 검색 엔진을 잘 사용하고 다른 사람의 코드를 직접 읽고 이해하는 한 모든 문제를 성공적으로 해결할 수 있습니다.
각도 게으른 하중에 대한 일부 함정은 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.