이 기사에서는 Minify In이라는 주제를 소개합니다. 그리고 그 과정에서 자세한 실제 데모를 제공합니다. 이 기사에서는 다음 사항을 다룰 것입니다.
이름에서 알 수 있듯이 축소는 파일 크기를 최소화하는 것입니다. 코드베이스에서 우리는 HTML, CSS 또는 자바 스크립트 파일을 축소 할 자유가 있습니다. 여기서는 CSS 파일 축소에 대해 설명합니다.
개발자가 코드를 작성할 때 추가 변경 프로세스를 단순화하기 위해 코드가 가장 읽기 쉬운 형식인지 확인합니다. 따라서 변수 이름은 쉽게 이해할 수 있고 많은 문자를 차지하는 형식입니다. 그런 다음 충분히 읽을 수 있도록 충분한 양의 공백을 추가합니다.
그러나 전체 프로세스에서 파일 크기가 증가하는 문자열을 느슨하게하여 웹 사이트 로딩 시간을 증가시키는 경향이 있습니다. 특히 기능과 추가 기능이 많은 웹 사이트에서는 코드 기반이 길수록 웹 사이트가 더 나빠집니다.
어쨌든 Google은 웹 사이트가 제공하는 최적의 사용자 경험을 기반으로 검색 페이지에서 웹 사이트의 순위를 매기는 제한된 형식을 가지고 있습니다. 사이트로드가 좋을수록 검색 페이지에서 웹 사이트 순위가 높아집니다.
위태로운 상황에서 사이트 로딩 시간이 잘못되어 사용자가 다음 사이트로 이동하는 것을 원하지 않습니다. 따라서 코드 축소는 매우 중요합니다.
사실, 웹 사이트를 구축하는 동안 우리는 최대 코드베이스로 구성된 것이 무엇인지 알고 있습니까?
CSS, HTML 및 Javascript에 관한 것입니다. 귀하의 웹 사이트를 시각적으로 매력적으로 보이게하기위한 경쟁은 CSS 파일에 많은 스트레스를 주지만 우리가 무거운 코드로 웹 사이트를 활용한다는 사실을 깨닫지 못합니다.
입력, 축소 ..
뭐가 축소 ?
축소를 사용하면 코드에 영향을주지 않고 파일 크기를 줄이는 최소 파일 크기로 코드를 줄일 수 있습니다. 이 과정에서 웹 사이트의 독창성에 영향을주지 않는 불필요한 공백과 문자를 제거 할 수 있습니다. 코드에서 피해야 할 몇 가지 사항은 다음과 같습니다.
- 공백 문자
- 줄 바꿈 문자
- 블록 구분자
- 코멘트
- 변수 이름 단축
이러한 요소는 웹 사이트를 실행하는 데 관여하지 않고 파일을 더 무겁게 만들고 웹 사이트 로딩 시간을 늘립니다.
코드의 가독성은 기계가 이해하는 것과 전적으로 배타적입니다. 웹 브라우저는 이해하고 실행하기 위해 문자 사이에 추가 공백이 필요하지 않습니다. 따라서이를 줄이고 CSS 및 HTML 코드를 축소하십시오.
예를 들어 보겠습니다.
#myContent {font-family : Montserrat} #myContent {font-size : 90 %}내 CSS 축소
원본 파일과 축소 된 파일에서 거의 48 % 차이가 있습니다. 178 바이트 감소. 축소 후
#myContent {font-family : Arialfont-size : 90 %}안녕하세요!
왜 축소 필요한가요?
웹 사이트 로딩 시간을 개선합니다. 편의에 따라 웹 사이트가로드되기를 기다리는 것을 좋아하는 사람은 없습니다. 사용 가능한 옵션이 너무 많아서 사람들은 다른 옵션으로 전환하는 경향이 있습니다. 따라서 파일 크기를 줄이는 것이 좋습니다.
당신은 어떻게 작게 하다 CSS, JS, HTML 코드?
축소하기 위해 온라인에서 사용할 수있는 수많은 도구가있어 코드 기반을 줄이는 데 도움이 될 수 있습니다. 수동으로 수행하도록 선택할 수도 있지만 더 큰 코드 기반의 경우 다음 도구 중 하나를 사용하여 CSS 파일을 축소하는 것이 좋습니다.
CSSminifier.com : 사용하기 매우 간단한 도구입니다. 왼쪽에있는 코드를 복사하고 축소 된 파일을 생성 한 다음 다운로드하면됩니다. 축소 된 파일의 확장자는 .min입니다.
축소 된 CSS 파일의 확장자는 demo.min.css입니다.
자바의 세션은 무엇입니까
Smallseotools.com : 코드를 복사하거나 코드 파일을 업로드하십시오. 코드를 축소하여 복사하거나 다운로드 할 수 있습니다.
Autoptimize : WordPress 도구에 추가 할 수있는 플러그인입니다. 플러그인으로 CSS 코드를 최소화하도록 선택할 수 있습니다.
개발자는 파일이 축소되는시기와 축소되지 않은시기를 더 쉽게 이해할 수 있습니다. 축소 된 파일의 확장자는 .min입니다.
언제해야합니까?
최소화는 주로 코드를 작성하고 응답을 위해 서버로 보내야 할 때 수행되어야합니다. 파일이 축소되면 축소 된 버전을 사용하여 사용자에게 배포합니다.
혜택 축소 ?
파일 크기 감소 : 여분의 공백을 제거하고 변수 이름을 줄이고 주석을 제거하면 파일 크기가 거의 30-60 % 줄어 듭니다. 더 빠른로드 : 네트워크를 통해 전송할 데이터가 적기 때문에 웹 사이트가 이전보다 더 빠르게로드됩니다. 낮은 대역폭 비용 : 불필요한 데이터가 제거되면 필요한 대역폭이 훨씬 줄어들고 비용도 줄어 듭니다.
기억해야 할 사항 :
축소를 시도하기 전에도 코드가 한계를 벗어나지 않는지 확인하세요. 흐름이 중단되지 않아야하며 기능은 익명으로 유지되어야합니다. 축소 후에도 코드가 비슷한 방식으로 실행되는지 확인해야합니다.
Infact, 모범 사례로 항상 템플릿을 준비 할 수 있습니다. 기본 제공 템플릿을 변경하면 많은 시간을 절약 할 수 있습니다.
압축과 비슷합니까?
글쎄, 강력히 아니오. 축소는 압축과 다릅니다. 압축하면 축소 된 파일이 더 많이 줄어들지 만 코드 스타일 및 구조에는 영향을주지 않습니다.
파일은 축소 된 다음 zip으로 압축되어 클라이언트가 웹 사이트에 액세스하도록 요청할 때 네트워크를 통해 전송됩니다. 그런 다음 파일이 압축 해제되어 사용됩니다.
예 :
축소 전 :
포트폴리오
- 집
축소 후 :
포트폴리오
- 집
코드는 사람이 읽고 이해하기가 확실히 더 어렵지만 기계가 렌더링하는 경우에도 똑같이 그럴듯합니다. 기계는 코드와 간격의 아름다움에별로 신경 쓰지 않고 요점을 이해하고 그에 따라 작동합니다.
축소 기술에 충분히 감동 받았나요?
그런 다음 스스로 시도하십시오. 파일의 부담을 줄이고 모든 사용자에게 웹 사이트가 자유롭게 흐르도록하십시오!
이것으로 CSS에서 최소화에 대한이 기사의 끝으로 이동합니다.
웹 개발에 대해 자세히 알아 보려면 에듀 레카. 웹 개발 인증 교육은 HTML5, CSS3, Twitter Bootstrap 3, jQuery 및 Google API를 사용하여 인상적인 웹 사이트를 만들고 Amazon Simple Storage Service (S3)에 배포하는 방법을 배우는 데 도움이됩니다.
여전히 관심이 있으시면 질문이 있으시면이 'Minify In CSS'블로그의 댓글 섹션에 게시 해 주시면 가능한 한 빨리 답변을 드리겠습니다.