CSS.JS 파일 게시 메커니즘에 대한 생각

설명하다

주목

자원 수준

페이지의 리소스 수준:

1. 글로벌 레벨(공통)
2. 모듈 수준
3. 페이지 수준(페이지)

최적화 계획

최적화는 주로 다음 측면에 중점을 둡니다.

1. 단일 파일의 바이트 크기 줄이기
2. 파일 수 줄이기(예: http 요청 수 줄이기)

다른 최적화는 개발 기술을 기반으로 하며 전문 지식 수준에 따라 다릅니다.

파일 출력 솔루션

1. 병합
2. 압축

자원 수준과 최적화 계획을 기반으로 다음 네 가지 계획이 수립됩니다.


1. 단일 파일을 직접 인용하여 순서대로 소개합니다(<link/>, <script/>)


2. 1을 기준으로 단일 파일 압축을 수행합니다.


3. 리소스 수준에 따라 새로운 단일 파일로 병합


4. 3을 기준으로 병합된 파일을 압축합니다.

생각

옵션 3: 병합된 파일 수를 확인하는 방법은 무엇입니까?

캐싱 문제

타임스탬프 접미사 사용

f2econfig_json

구성 파일:

var f2eJson={
"버전":"v3",//버전

"업데이트":"20091015",//타임스탬프에 따라 캐시 업데이트

"압축":"1",//파일 출력 구성표 (1, 2, 3, 4)

"공통":[//전체 사이트에 대한 공개 스타일

"공통/글로벌.css"

],

"모듈":{ //모듈 및 스타일

"모듈 1":["제품,.css"]

},

"페이지":{//각 페이지가 소유한 스타일

"index.php":["","sys/index.css"],

//첫 번째 요소는 모듈 참조 이름을 저장합니다. 그렇지 않은 경우 공백으로 둡니다.

"search.php":["모듈 1","제품/search.css"]

//","로 구분된 여러 모듈을 참조합니다(예: 모듈 1, 모듈 2).

}

}

1. PHP에는 전용 json 변환 라이브러리가 있습니다.
2. js의 구성 구조는 CSS의 json 구성과 동일합니다.

f2engine.php

1. 구성 파일이 업데이트되지 않으면 json은 배열로 한 번만 구문 분석됩니다.
2. 리소스를 한 번만 구문 분석하고 다음에 직접 사용할 수 있도록 결과를 저장합니다.

예

예를 들어, search.php 페이지의 스타일 참조

1. 페이지를 기반으로 페이지 수준 리소스 찾기: Page["search.php"]
2. 이 배열의 첫 번째 값을 기반으로 참조된 모듈 스타일을 찾습니다.
3. 구성 파일의 "압축" 값을 기반으로 파일 출력 방식을 결정하고 처리합니다.
4. 페이지에 출력

   //전체 사이트 스타일 공통

   <link type="text/css" href="common/global.pack.css?20091015" rel="stylesheet" />

   //모듈 스타일 모듈

   <link type="text/css" href="product.pack.css?20091015" rel="stylesheet" />

   //페이지 스타일 페이지

   <link type="text/css" href="product/serach.pack.css?20091015" rel="stylesheet" />

   참고: 압축 후 파일 이름은 search.pack.css가 됩니다.