-1

잘 이해하고 모듈화 된 코드의 장점은 재사용 성과 조직에 있습니다. 하나의 파일에 큰 덩어리로 작성된 코드는 읽기가 어려우므로 코드의 일부분을 다시 사용하려면 명령문을 포함하기보다는 신중한 복사 붙여 넣기가 필요합니다.왜 모듈 식 자바 스크립트를 쓰나요?

특히 Javascript와 관련하여 최근 예제를 통해이 문제에 대해 생각하게되었습니다. 당신이 페이지별로 조건부로 자바 스크립트를 포함하지 않는다면 JS 코드를 적절하게 모듈화하지 못했음을 의미하는 SO에 대한 의견이 나왔습니다. 그러나 코드 재사용 및 조직 관점에서 볼 때 페이지로드시 발생하는 상황을 고려할 필요는 없습니다. 코드는 별도의 파일 묶음으로 작성된 다음 함께 제공되고 제공되기 전에 축소 된 경우와 마찬가지로 읽을 수 있습니다. 예를 들어 rails asset pipeline은이 작업을 수행합니다.

자산 파이프 라인을 처음 접했을 때 마음이 약해지고 "필요할 때만 자바 스크립트를 어떻게로드합니까?"라고 궁금해하기 시작했습니다. a few SO questionsan article on the matter을 읽고 "컴파일"한 후 내 코드가 어떻게 될지 걱정하지 않아야한다고 생각하기 시작했습니다.

모듈 식 코드를 순전히 인간 수준의 활동으로 작성하는 목적은 코드 실행이 시작된 후 모듈화에 대한 걱정을 중지해야합니까? Javascript의 경우, 스크립트가 포함되기 전에 함께 매치되는 것에 염려해야합니까?

+0

축소가 편집되는 것을 상상해보십시오. 컴파일 후에 모듈화 된 코드가 모듈화되어 있지 않은 개발자는 있습니까? 아니요. 자바 스크립트에도 동일하게 적용됩니다. 필요한 경우로드하는 방법은 사용 사례에 따라 크게 달라집니다. 코드가 필요한 경우로드해야합니다. 필요하지 않을 경우에만로드하는 것이 좋습니다. – Dave

+0

@Dave 그게 내가 생각한거야.하지만 많은 사람들이 자바 스크립트를 페이지 단위로로드해야한다고 생각한다. (필자는 레일스 자산 파이프 라인 질문과 관련하여 사람들의 답변에서이를 수집한다.) . – Ziggy

답변

2

성능면에서 실제로 이것에 대해 이야기하지 않은 것은 실제 HTML 브라우저 다운로드 동작입니다. 페이지 단위로 필요한 자바 스크립트를 표시하고 브라우저 캐싱 및 다운로드 동작을 활용하는 것 사이에 좋은 선을 짚어 가야한다고 생각합니다.

예를 들어 모든 페이지에서 20 가지 다른 자바 스크립트 스 니펫을 사용한다고 가정 해 보겠습니다. 이 경우 브라우저를 다운로드해야하는 파일 수가 적을수록 파일을 하나의 파일로 컴파일/축소 할 수 있습니다. 이 단일 파일은 동적 파일로 컴파일 된 경우 정적 파일이거나 정적 인 것처럼 보이는 (전송 된 헤더를 통해) 것으로 가정하여 캐시 할 수도 있습니다.

이제 20 개의 스 니펫 중 15 개가 모든 페이지에서 사용되고 나머지는 간헐적으로 사용됩니다. 물론 항상 사용 된 스 니펫 중 15 개를 단일 파일에 저장합니다. 그러나 다른 사람들은 어떨까요? 제 의견으로는 파일의 크기와 사용 빈도를 고려해야합니다. 크기가 작고 비교적 자주 사용되는 경우 주 파일의 추가 크기가 나중에 콘텐츠를 다운로드하라는 추가 요청의 필요성보다 중요하다고 생각하여 주 파일에 넣는 것이 좋습니다. 코드가 큰 경우 필요한 경우에만 사용하는 경향이 있습니다. 물론 일단 사용되면 캐시에 남아 있어야합니다.

이 접근법은 일반적으로 사용자가 세션 당 여러 페이지로드를 예상하는 웹 응용 프로그램에 가장 적합 할 수 있습니다. 물론 광고 방문 페이지를 디자인하거나 사용자가 단일 페이지 만 볼 수있는 곳이라면 초기 javasciprt 다운로드를 가능한 한 작게 유지하고 사용자 상호 작용을 기반으로 필요한 경우 새 자바 스크립트를로드하는 방법에 의지 할 수 있습니다.

0

이 질문의 모든 측면은 "의존적"으로 귀결됩니다.

모두 채우면 80,000 줄의 코드가 생성되는 엔터프라이즈 급 응용 프로그램을 작성하고 있습니까?

그렇다면 예, 컴파일 시간이 엄청날 것이며 문서의 <head>에 내용을 채우면 사람들은 대기 시간을 느낄 것입니다.
이미 캐시 된 경우에도 컴파일 타임 만 만져집니다.

최종 사용자가 볼 수없는 수십 개의 위젯을 작성하고 있습니까?
특히 휴대 기기에?

만약 그렇다면 다운로드/컴파일 시간을 저장하고 대신 코어 기능을로드 한 다음 필요할 때 추가 기능을로드 할 수 있습니다. 비 기술적 인 최종 사용자의 기대치가 더 많아지는 연구가 늘어나고 있습니다. 모바일 인터넷 경험은 콘텐츠 측면뿐 아니라 일반적인 대기 시간과 같은 데스크톱 경험과 유사합니다.

모바일 환경 (또는 모바일 환경의 데스크톱 경험)에 대해 5s-8을 받아들이는 사람이 적지 만 대화 형 시점에 도달하는 데는 "우물, 모바일입니다. 더 긴 "생각의 기차.

별도로 모바일 경험을 제공하지 않고로드하기 전에 80,000 라인 응용 프로그램 또는 300kB JS 파일이 있거나 XML 파싱 등을 많이 수행 한 경우 모바일은 특히 미디어 사이트 또는 상업/소매 사이트 인 경우 특히 상처를 입을 수 있습니다.

질문에 대한 정답은 대상 장치, 사이트/응용 프로그램의 의도, 좋은 아이디어와 나쁜 아이디어가 있다는 것 외에는 질문에 대한 정답이 없다는 것입니다. 인구 통계, 코드베이스, 사용자가 사이트를 자주 방문 할 것이라는 예상 (따라서 캐시 된 자산의 이점), 코드베이스의 업데이트 빈도 (업데이트 된 모듈 하나, 캐시 된 모듈 20 개, 완전 무효 21 모듈 청크, 하나의 업데이트 된 라인, 250,000 고객의 고객 기반으로 인해, 몇 가지 이유에 대한 배려입니다) ...

... 이상 ...

당신이하고있는 것을 파악하십시오.
그렇게하기 위해해야 ​​할 일을 파악하십시오.
고객에게 좋은 경험을 제공하면서 어떻게 수행하는지 알아냅니다.

파일을 결합하는 방법을 알고 있어야합니다.
요청시로드하는 방법을 알아 두십시오.
모듈을 지능적으로로드 할 수있는 라이트 부트 스트랩을 만드는 법을 알아야합니다.
도구으로 사용하면 사용자가 달성하려는 최선의 경험을 제공 할 수 있습니다.