사이트에서 javascript 및 css 파일을 처리하는 방법은 무엇입니까?

Question

최근에 웹 응용 프로그램에서 공유되는 javascript 및 css 파일을 처리하는 방법에 대해 생각해 보았습니다.

현재 작업하고있는 웹 응용 프로그램에서 서버의 폴더에있는 여러 가지 javascript와 css 파일이 상당히 많습니다. 일부 파일은 재사용되지만 다른 파일은 재사용되지 않습니다.

생산 사이트에서 많은 수의 HTTP 요청과 많은 킬로바이트의 불필요한 자바 스크립트 및 중복 CSS가로드되는 것은 매우 어리 석습니다. 그 해결책은 페이지 당 하나의 커다란 번들 파일을 만드는 것입니다. 그러면 필요한 정보 만 포함 된 다음 압축되어 (GZIP) 클라이언트로 보내집니다.

자바 스크립트 파일 번들을 생성하고 수동으로 최소화해야하는 걱정은 없습니다.하지만 앱이 지속적으로 유지 관리되고 변경되고 개발되기 때문에 곧이 문제를 해결할 두통이됩니다. 수동으로 javascript 및/또는 css 파일의 변경 사항을 프로덕션으로 가져 오는 새 업데이트를 푸시하면서

이 문제를 해결하기위한 좋은 접근 방법은 무엇입니까? 귀하의 신청서에서 이것을 어떻게 처리합니까?

Answer 1

당신이 말하는 것은 minification입니다.

다른 플랫폼 및 언어에 도움이되는 많은 라이브러리와 도우미가 있습니다. 당신이 사용하고있는 것을 게시하지 않았기 때문에, 나는 당신 자신에게 더 관련이있는 것을 향해 당신을 가리킬 수는 없습니다.

다음은 Google 코드의 프로젝트입니다 (minify).

Here은이 모든 작업을 수행하는 .NET Http 처리기의 예입니다.

Answer 2

CSS 파일을 공통 부분 (인쇄, 대)과 같이 논리 부분으로 분류하고 나눌 수 있으며 CSS의 가져 오기 기능을 사용하여 CSS 파일을 성공적으로로드 할 수 있습니다. 이러한 작은 파일을 재사용하면 클라이언트 측 캐싱을 사용할 수도 있습니다. Javascript에 관해서는 서버 측에서이 문제를 해결할 수 있다고 생각합니다. 여러 스크립트 파일이 페이지에 추가되었지만 동적으로 스크립트 파일 서버 측을 생성 할 수는 있지만 클라이언트 측 캐싱이 작동하려면이 부분이 다르고 고정 주소.

Answer 3

내가 시작하는 사이트에서 똑같은 문제를 다루고 있습니다.

최근에 SquishIt이라는 프로젝트에 대해 알게되었습니다 (GitHub 참조). 그것은 Asp.net 프레임 워크를 위해 만들어졌습니다. asp.net을 사용하지 않는다면, 여기에서하고있는 일에 대한 원리에 대해 계속 배울 수 있습니다.

SquishIt는 파일의 명명 된 "번들"을 만든 다음 해당 사이트 전체에서 결합 또는 축소 된 파일 번들을 렌더링 할 수 있습니다.

Answer 4

필자는 필요에 따라 원시 CSS 및 Javascript 소스 코드 파일을 결합, 압축/축소, gzips 및 캐시하는 ASP.NET 처리기를 작성했습니다. 세 CSS 파일을 유치하기 위해, 예를 들어, (

<link rel="stylesheet" type="text/css" 
     href="/getcss.axd?files=main;theme2;contact" /> 

getcss.axd 핸들러가 쿼리 문자열에서 읽고이와 작게하다 읽을 필요가있는 파일을 결정합니다 ... 마크 업이 같을 것이다 이 경우 main.css, theme2.css 및 contact.css 파일을 찾습니다.파일을 읽고 압축하면 압축 된 큰 문자열이 서버 측 캐시 (RAM)에 몇 시간 동안 저장됩니다. 후속 요청에서 다시 압축 할 필요가 없도록 항상 캐시에서 먼저 찾습니다.

• 그것은 추가 단계가 배포 유지하는 것은 매우 쉽습니다
• 필요하지 않습니다 최대한
• 같은 요청의 수를 감소 ... 때문에

  나는이 솔루션을 사랑

오직 아래쪽면은 모든 스타일/스크립트 코드가 결국 서버 메모리에 저장된다는 것입니다. 그러나 RAM은 지금까지 그렇게 큰 거래가 아니기 때문에 요즘 아주 저렴합니다.

또한 언급할만한 것은 쿼리 문자열이 유해한 경로 조작 (A-Z 및 0-9 만 허용)에 부합하지 않는지 확인하십시오.

Answer 5

정확히, 즉 축소, 결합 등의 라이브러리 Combres을 만들었습니다. 로컬 및 원격 JS/CSS 파일에 대한 변경 사항을 자동으로 감지하고 최신 버전을 브라우저로 푸시합니다. 무료 & 오픈 소스입니다. Combres에 대한 소개는 this article을 확인하십시오.