이전 프로젝트는 Grunt를 사용하여 구성된 다음 요구 사항을 사용하여 모듈 식을 만들었습니다. 요구 사항 공무원은 압축 및 병합을 위해 Grunt 플러그인을 제공합니다. 현재 프로젝트는 GULP에 도달했으며 Modularity에서 SEAJS를 사용하므로 당연히 모듈 병합 및 압축 문제도 생각했습니다.
그런 다음이 문제를 처음 해결했을 때별로 매끄럽지 않았습니다. NPM에서 SEAJS 병합 및 압축에 대한 인기있는 Gulp 플러그인은 특히 없었습니다. Seajs Github에서 많은 문제를 읽었지만 대부분의 문제는 모든 모듈 파일을 총 파일로 만 병합 할 수 있습니다. 이것은 단일 페이지 응용 프로그램에 확실히 문제가되지 않습니다. 그러나 다중 페이지 애플리케이션의 경우 모듈 식 아이디어의 주문형 로딩의 핵심을 위반하므로 원하는 것은 각 페이지가 의존하는 모듈을 기반으로 주문형을 병합 할 수있는 방법입니다.
이 주문형 병합의 의미는 한편으로는 페이지가 의존하는 모듈 만 병합되며 다른 한편으로는 병합에 참여하지 않는 일부 모듈을 필터링 할 수 있다는 것입니다. 이를 고려하는 이유는 jQuery와 같은 일부 모듈이 모두 타사 의존 라이브러리이며 큰 파일이있을 수 있기 때문입니다. 가장 중요한 것은 코드를 거의 변경하지 않으므로 이러한 모듈이 페이지의 JS에 병합되지 않으면 브라우저 캐시를 더 잘 활용하는 데 도움이됩니다. 이 기사는 Gulp에 구축 된 중소형 프로젝트에서 SEAJS 병합 압축을 수행하는 간단하고 실행 가능한 방법을 소개합니다.
참고 : SEAJS 병합의 효과를 설명하기 위해이 기사는 데모 데모를 제공합니다. 여기에는 Login.html 및 Regist.html의 두 페이지가있는 데모가 있습니다. 다음 링크를 통해 볼 수 있습니다.
http://liuyunzhuge.github.io/blog/seajs/dist/html/login.html
http://liuyunzhuge.github.io/blog/seajs/dist/html/regist.html
Login.html을 예로 들어,이 페이지의 소스 파일을 볼 때 Seajs 및 관련 구성 파일 Common.js를 참조하는 것 외에도 앱/로그인 만 페이지의 기본 JS로만 참조 할 수 있습니다. 이 앱/로그인 모듈은 실제로 JS/App/Login.js에 해당합니다.
그러나 실제로이 로그인 .js는 더 많은 모듈 JS에 의존하며 Chrome의 출처를 통해이 페이지에서로드 한 자세한 JS 리소스를 볼 수 있습니다.
Login.js가 병합되기 전에 코드는 다음과 같습니다.
그러나 처음 두 스크린 샷에서는 MOD/MOD1.JS, MOD/MOD2.JS, DEPS/FASTCLICK.JS의 세 가지 파일을 보지 못했습니다. login.js 외에도 lib/bootstrap.js, lib/jquery.js, lib/jquery.validate.js를 보았습니다. 이것이 병합의 효과입니다. 한편으로, JS/LIB 폴더의 모듈은 합병에 참여하지 않습니다. 반면에, 페이지의 기본 JS가 의존하는 다른 모듈은 페이지의 기본 JS 파일로 병합됩니다.
이 데모와 관련된 코드는 다음 링크를 통해 볼 수 있습니다.
https://github.com/liuyunzhuge/blog/tree/master/seajs
1. 아이디어를 합병하십시오
사실,이 방법은 비교적 간단합니다. 결국 그것을 소개합니다.
1) 먼저 Seajs 모듈을 구성하는 폴더 구조에 대해 먼저 이야기하겠습니다.
이 구조는 requirejs에서 빌려와 파일 조직을 평평하게하려고 시도하며 중소형 프론트 엔드 프로젝트에는 너무 귀찮지 않아야합니다. 각 폴더의 기능은 다음과 같습니다.
1) JS/App은 각 페이지의 기본 JS, 기본적으로 한 페이지의 논리와 하나의 JS를 저장합니다.
2) JS/DEPS는 메인 JS로 병합되어야하는 타사 모듈을 저장합니다.
3) JS/LIB는 합병에 참여할 필요가없는 타사 모듈을 저장합니다.
4) JS/Mod는 각 프로젝트에서 스스로 작성된 일부 JS 모듈을 저장합니다.
5) common.js는 SEAJS 구성 파일입니다.
2) Common.js에서는 JS/LIB의 모든 모듈이 별칭 옵션으로 구성됩니다. 이러한 JS는 병합에 참여하지 않으며 브라우저 캐시에 사용해야하기 때문입니다. 별명은 JS/LIB에서 파일을 수정하거나 업그레이드 할 때 이러한 파일의로드 주소를 업데이트 할 수 있습니다.
베이스는 JS 폴더로 구성됩니다. 모듈 개발에서 다른 모듈이 필요할 때, 나의 습관은 상대 식별없이 mod/mod1과 같은 모듈 식별자를 직접 작성하는 것입니다. 정의 할 모듈이 동일한 폴더에있는 모듈이 존재하더라도 기본 디렉토리를 JS 폴더로 설정하는 이유는 사이트의 루트 디렉토리와 약간 유사합니다.
3) 병합 아이디어 : 주로 두 개의 Gulp 플러그인 인 Gulp-Seajs-Transport 및 Gulp-Seajs-Concat을 사용합니다. 그들은 Github에서 인기가 높지는 않지만 내 문제를 잘 해결했으며 사용하기가 매우 간단합니다.
(자세한 내용은 관련 Gulpfile.js 파일을 찾으려면이 기사의 시작 부분에서 제공된 소스 코드 링크를 확인해야합니다)
Gulp-Seajs-Transport는 SEAJS 모듈 파일을 익명 모듈에서 명명 된 모듈로 전환하는 데 도움이됩니다. 예를 들어, js/mod/mod1.js는 빌드하기 전에 다음과 같습니다.
그러나 운송 처리 후에는 다음과 같습니다.
이것은 Seajs 병합 작업에서 더 중요한 지점입니다. 그것은 요구 사항과 같지 않고 직접 연결하십시오. 먼저 전송 작업에 의해 처리되고 익명 모듈을 명명 된 모듈로 바꾸고 Define의 두 번째 매개 변수를 사용하여 요구 사항과 마찬가지로이 모듈의 모든 종속성을 설명합니다. 운송을 완료 한 후에 만 전송 할 수 있습니다. 이유는 다음을 참조하십시오 : https://github.com/seajs/seajs/issues/426.
Gulp-Seajs-Concat이 병합되면 매우 간단합니다. 기본 옵션을 알려주십시오. 이 기본 옵션은 JS/Common.js의 기본 옵션과 일치합니다. Gulp-Seajs-Concat은 다른 모듈 파일을 찾을 수 있으므로 기본 및 전송 후 모듈에 따라 다릅니다.
4) 이 방법은 페이지에서 메인 JS를 사용할 때 사용해야합니다.
사용의 매개 변수 이름은 병합 된 기본 JS의 기본 모듈 ID와 일치해야합니다. 예를 들어, JS/App/Login.js가 병합 된 후 다음과 같습니다.
첫 번째 정의 해당 모듈은 병합 된 파일의 기본 모듈입니다. 빨간색 상자의 내용은 기본 모듈의 ID입니다. SEAJS가 모듈을 사용하는 경우 매개 변수 이름은이 ID와 동일해야합니다. 그렇지 않으면 SEAJS 가이 파일을 성공적으로로드하더라도 모듈에서 코드를 실행하지 않습니다. SEAJS에는 규칙이 있으므로 다음과 관련하여 ID 및 경로 일치 원리가 있습니다. 즉, SEAJS가 파일에 여러 모듈을 포함하는 데 사용할 때이 파일의 기본 모듈은 사용의 매개 변수 이름에 따라 찾을 수 있습니다. 그들이 정확히 일치 할 때만 찾을 수 있습니다.
5) 압축 난독 화 : Gulp-Iglify 사용 :
그러나 맹글에주의를 기울이려면 요구 수출 모듈을 제외해야합니다. 그렇지 않으면 예상치 못한 문제가 발생합니다.
2.이 기사의 요약
이 기사의 내용은 매우 간단하지만 Gulp와 Seajs를 처음자를 때이 기사의 문제를 해결하는 데 많은 시간이 걸렸습니다. 데모를 준비했을 때의 상황보다 진전이 훨씬 매끄럽지 만 ... 무슨 일이 있어도이 기사의 내용이 일부 친구들이 어느 정도 도움이 될 수 있기를 바랍니다.