JS 컴포넌트에는 대개 CSS 이미지가 함께 제공되는데 이렇게 사용하면 조금 번거로울 수도 있습니다. 컴포넌트를 충분히 단독으로 만들기 위해 CSS 이미지를 js에 패키징한 다음, 그런데 요청 횟수를 줄이는 게 더 중요한 것 같아요.
그렇다면 어떻게 패키징할까요? 리소스 패키지 와 같은 솔루션이 있지만 핵심 사용자는 여전히 ie6과 같은 최신 브라우저를 사용하고 있습니다.
내 솔루션:
- CSS : CSS는 js에 문자열로 저장될 수 있으며 js에 의해 페이지에 동적으로 추가될 수 있습니다. 페이지가 사용하기에 적합하지 않을 수 있지만 일반적으로 구성 요소는 영향을 받지 않습니다.
- image : CSS에 사용되는 이미지는 dataURI( RFC 2397 ) 및 MHTML( RFC 2557 )을 사용하여 js로 컴파일됩니다. (Qin Ge가 작성한 dataURI 및 MHTML은 그것이 무엇인지 모르는 학생들에게 여전히 권장됩니다.) CSS에서 절대 경로를 원할 경우 js를 저장할 수도 있습니다. js를 직접 사용하는 경우 이론적으로는 가능하지만 일반적으로 js의 className을 변경하는 것이 좋습니다.
- flash : 저장, 복사 등 상대적으로 작은 플래시도 패키징할 수 있습니다. 그러나 이제 IE가 아닌 경우 외부 링크를 사용하여 문제를 해결할 수 있습니다.
다음은 포장 테스트의 예 입니다.
일부 세부 사항 및 엉킴
- 모든 이미지를 js로 패키징하는 것이 반드시 합리적인 것은 아닙니다. 패키징되는 것은 반드시 사용해야 하는 이미지여야 합니다.
그렇다면 제외된 사진을 다른 패키지에 담아서 사용하는 것이 좋을까요, 아니면 사진을 직접 활용하는 것이 좋을까요? - 이미지를 먼저 압축한 다음 편집할 수 있습니다. 제가 선택한 이미지 압축 도구는 pngout 이며, 보통
-s5 사용합니다.
누군가가 base64에서 압축되지 않은 데이터를 테스트했습니다. 아마도 그렇지 않을 것입니다 . 모두가 스스로 판단할 수 있습니다. - dataURI를 직접 사용하면 반복되는 이미지 참조가 매우 커질 것이며 gzip은 돼지처럼 멍청하여 압축하지 않습니다.
저는 그것을 js 변수로 저장하기로 선택했고, Taobao의 친구들은 class 메소드를 사용했습니다. - 끝 구분 기호가 없기 때문에 MHTML을 ie7+/vista에 표시할 수 없습니다. Win03sp2에는
Content-Type 없으며 보안 프롬프트가 표시됩니다. 그 이유는 MIME이 표준이 아니며 모든 것을 생략할 수 없기 때문입니다. - 모든 것을 하나의 파일로 패키징해야 할까요, 아니면 MHTML과 dataURI 유형에 따라 두 개의 파일로 패키징하고 서버의 ua에 따라 파일을 보내야 할까요, 아니면 클래스 라이브러리에서 지능적으로 읽어야 할까요? 후자가 더 조화로운 것 같습니다.
- dataURI를 사용하여 swf를 컴파일하는 데 문제가 있습니다. fp8에서는 문제가 없다고 하는데 지금은 fp10입니다.
또 다른 단독 솔루션은 js를 swf로 패키징하는 것이지만 조화롭지 못한 느낌이 듭니다.
다중 부분/관련 예제
표준은 아니지만 실행될 수 있습니다. 줄 바꿈도 매우 중요합니다.
콘텐츠 유형:다중 부분/관련;경계="_BAIDU_YOUA_BB_YEP"
---BAIDU_YOUA_BB_YEP
콘텐츠 유형:이미지/png
콘텐츠 위치:logo.png
콘텐츠 전송 인코딩:base64
...base64...
---BAIDU_YOUA_BB_YEP
콘텐츠 유형:이미지/png
콘텐츠 위치:nono.png
콘텐츠 전송 인코딩:base64
...base64...
---BAIDU_YOUA_BB_YEP--
