CSS 또는 JS를 병합하면 각 페이지 유형에 대해 새 파일이 생성됩니다.

15

작은 CSS 및 JS 파일이 많이 있으며 병합을 활성화하는 것이 좋습니다.

많은 CSS 및 JS 파일이 모든 페이지 (홈 페이지, 카테고리 페이지, 제품 세부 사항 페이지)에서 사용됩니다.

각 페이지에 다른 병합 된 파일이 다시로드되는 것을 볼 때마다 포함 된 CSS조차도 겹쳐 야합니다.

이를 피하고 더 많은 데이터를 재사용 할 수있는 방법은 무엇입니까?

css javascript frontend

— 알렉스
소스

Alex 당신은 다른 페이지에 다른 CSS와 JS 파일을 포함하고 있습니까? 이 추가 컴파일 / 병합이 발생하고 있음을 확인하는 링크 나 정보가 있습니까? 나는 다른 날에 그것에 대해 somehting을 보았고 더 알고 싶습니다. 최근에 JS를 컴파일 / 병합하는 데 문제가있었습니다.

— Mark Weston

공개 링크가 없습니다. 그러나 예를 들어 제품 페이지에는 추가 파일 .css과 .js파일이 있습니다. Magento 기본 설치에서 실제로 .css파일은 전체적으로 거의 동일하므로 병합 된 파일은 동일한 해시를 갖습니다. 그러나 .js이것 때문에 많은 차이가 있습니다. 따라서 항상 전체 프로토 타입 라이브러리를 포함하여 제품 페이지 및 카테고리 페이지 등을 위해 새로 결합 된 파일이 있습니다.

— Alex

캐시 무효화를 돕기 위해 "Javascript 파일 병합"기능을 검색했습니다. 이 의견이 검색 엔진을 업데이트하고 딥을 방지하기를 바랍니다.

— Ray Foss

14

짧은 대답 : Magento의 JS / CSS 병합 기능을 활성화하지 마십시오. 전반적으로 각 자산을 개별적으로 보내는 것보다 일반적인 결제의 수명주기 동안 성능이 더 나쁩니다.

긴 대답 : 사용자에게 하나의 CSS 파일 만 제공해야합니다. 모든 CSS가 다운로드 될 때까지 여러 파일이 렌더링을 차단합니다. 많은 양의 CSS를 제공하지 않는 한 한꺼번에 전송하는 것이 유리한 경우 브라우저가 캐시합니다. Sass 또는 LESS와 같은 전처리기를 사용하면 Magento가 비효율적으로 수행하는 대신이 단계를 빌드 프로세스로 가져올 수 있습니다.

JS의 경우 이상적으로 이러한 서버 측을 결합해서는 안됩니다. AMD / RequireJS와 같은 클라이언트 측 스크립트 로더가 더 나은 선택이며 Magento의 Layout XML이 제공하지 않는 종속성 관리에 도움이됩니다. 실세계에서는 Magento가 체크 아웃 흐름의 여러 지점에서 스크립트를 삭제합니다. 여러 요청의 초기 페이지로드 적중을 수행하고 나중에 별도의 캐시 된 자산을 갖는 것이 좋습니다.

Fooman Speedster Advanced 확장은 오늘날의 복제없이 자산을 지능적으로 결합하는 가장 좋은 방법입니다.

Magento 1.x 아키텍처는 다소 제한적이며, 이는 프론트 엔드 성능에 대한 불량 사례로 시작됩니다. 그 배의 코스를 바꾸는 것은 현실적이지 않습니다. 마 젠토 2에 공헌하십시오.

— 브렌든 팔 코프 스키
소스

1

"마 젠토 2에 공헌하십시오."

— benmarks

6

우리는 Fooman Speedster Magento Extension을 사용하고 있습니다. CSS와 JS 파일의 병합을 처리하여 페이지 성능을 향상시키는 멋진 확장 프로그램입니다.

페이지에서 :

Javascript 및 CSS 파일을 결합, 압축 및 캐싱하여 상점을 가속화하십시오. Fooman Speedster는 여러 Javascript 및 CSS 파일을 단일 Javascript 파일 및 단일 CSS 파일로 결합하여 더 빠른 페이지로드 시간을 가능하게합니다.

— 케니
소스

4

언급 해 주셔서 감사합니다. 병합 된 Javascript 파일의 이중 증가를 줄이기 위해 테마 최적화 프로그램과 함께 제공되는 다른 무료 Speedster 확장 (Speedster Advanced)을 지적하고 싶습니다 .Ibiza Developer Conference 2012에서 프리젠 테이션을 참조하십시오 .magento-developers-paradise.com 자세한 내용은 / wp-content / uploads /…

— Fooman의 Kristof

나는 많은 테스트를했다. 모든 중복성을 제거하지는 않지만 일부는 제거합니다. 그리고 최고의 축소 기는 아니지만 중복 제거 기능은 쉘 스크립트로 스스로 할 수있는 일을 보상합니다. @KristofatFooman 시스템을 사용하고 uglifyjs --compress주석을 더 잘 처리 할 수 있다면 내 코드로 약 4 % 더 작은 개선을 얻을 수 있습니다. 노드에서 uglifyjs v3을 사용하고 있습니다.

— Ray Foss 2016 년