정보실

웹학교

정보실

css CSS 축소를 위한 완벽한 모범 사례(2)

본문

축소 대 압축-차이점이 있습니까? 


코드 축소 및 압축은 종종 크기를 줄이도록 성능 최적화를 해결하기 때문에 상호 교환 적으로 사용됩니다. 그러나 그것들은 다른 것들이며, 나는 방법을 분명히 하고 싶습니다 :

  • 축소는 코드 내용을 변경합니다. 불필요한 공백, 문자 및 서식을 제거하여 코드 파일 크기를 줄임으로써 코드 파일 크기를 줄입니다. 더 적은 문자를 사용하도록 변수의 이름을 안전하게 바꾸어 코드를 더욱 최적화 할 수 있습니다.
  • 압축은 코드의 내용을 반드시 변경하지는 않습니다.이 탐사에서 다루지 않은 이미지와 같은 이진 파일을 고려하지 않는 한 좋습니다. 요청시 브라우저에 파일을 제공하기 전에 파일을 압축하여 파일 크기를 줄입니다.


이 두 기술은 상호 배타적이지 않으므로 함께 사용하여 최적화 된 코드를 사용자에게 제공 할 수 있습니다.


필요한 배경 정보가 없으면 웹 프로젝트의 CSS를 축소하는 방법을 살펴 보겠습니다. 우리는 이것을 달성 할 수 있는 세 가지 방법을 탐구하고 내가 만든 샘플 웹 사이트에 대해 그렇게 할 것입니다.이 웹 사이트는 단일 외부 main.css 파일에 다음 CSS가 있습니다.


html,
body {
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
}
body .pull-right {
  float: right !important;
}
body .pull-left {
  float: left !important;
}
body header,
body [data-view] {
  display: none;
  opacity: 0;
  transition: opacity 0.7s ease-in;
}
body [data-view].active {
  display: block;
  opacity: 1;
}
body[data-nav='playground'] header {
  display: block;
  opacity: 1;
}
/* Home */
[data-view='home'] {
  height: 100%;
}
[data-view='home'] button {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.5s ease-in-out;
}
[data-view='home'] button.live {
  opacity: 1;
  pointer-events: all;
}
[data-view='home'] .mdc-layout-grid__cell--span-4.mdc-elevation--z4 {
  padding: 1em;
  background: #fff;
}

독립형 온라인 도구 


CSS 축소에 익숙하지 않고 느리게 접근하려는 경우 여기에서 시작하여 더 편할 때만 다음 단계로 진행할 수 있습니다. 이 방법은 효과가 있지만 모든 팀 규모의 프로젝트, 특히 여러 팀 구성원이 있는 실제 프로젝트에는 번거롭고 부적합합니다.


CSS를 빠르게 축소 할 수 있는 수많은 무료 온라인 도구가 있습니다. 그들은 다음을 포함합니다 :

세 가지 도구는 모두 하나 이상의 입력 필드로 구성된 간단한 사용자 인터페이스를 제공하며 CSS를 복사하여 입력 필드에 붙여 넣고 단추를 클릭하여 코드를 축소해야 합니다. 

결과는 UI에 표시되어 프로젝트에 복사하여 다시 붙여 넣을 수 있습니다.


Minified Output From CSS Minifier 


위의 CSS 축소기 스크린 샷에서 오른쪽의 축소 출력 섹션에 공백, 주석 및 서식이 제거 된 CSS 코드가 있음을 알 수 있습니다.


축소는 비슷한 작업을 수행하지만 축소 프로세스로 인해 파일 크기 절약을 표시 할 수도 있습니다.


두 경우 모두 축소 된 CSS는 다음과 같습니다.


body,html{height:100%}body{padding:0;margin:0}body .pull-right{float:right!important}body .pull-left{float:left!important}body [data-view],body header{display:none;opacity:0;transition:opacity .7s ease-in}body [data-view].active{display:block;opacity:1}body[data-nav=playground] header{display:block;opacity:1}[data-view=home]{height:100%}[data-view=home] button{opacity:0;pointer-events:none;transition:opacity 1.5s ease-in-out}[data-view=home] button.live{opacity:1;pointer-events:all}[data-view=home] .mdc-layout-grid__cell--span-4.mdc-elevation--z4{padding:1em;background:#fff}

이러한 방식으로 CSS를 축소하면 온라인 상태 일 것으로 예상하고 위 웹 사이트의 가용성을 가정합니다. 너무 좋지 않습니다!


명령 줄 도구 


많은 명령 줄 도구는 위의 웹 사이트와 정확히 동일한 기능을 수행 할 수 있지만 긴 비행 중에 인터넷 없이도 작동 할 수 있습니다.


컴퓨터에 npm 또는 yarn이 로컬로 설치되어 있고 프로젝트가 npm 패키지로 설정되어 있다고 가정하면 (npm init -y를 수행 할 수 있음) npm install cssnano --save-를 사용하여 cssnano를 dev 종속성으로 설치하십시오 dev 또는 원사 추가 설치 cssnano -D.


cssnano는 PostCSS가 제공하는 도구 에코 시스템의 일부이므로 postcss-cli를 dev 종속성으로 설치해야 합니다 (위의 명령을 다시 실행하지만 cssnano를 postcss-cli로 교체).


그런 다음 PostCSS에 cssnano를 플러그인으로 사용하도록 지시하는 다음 컨텐츠로 postcss.config.js 파일을 작성하십시오.


module.exports = {
    plugins: [
        require('cssnano')({
            preset: 'default',
        }),
    ],
};

그런 다음 package.json 파일을 편집하고 다음과 같이 postcss 명령으로 CSS를 축소하는 스크립트 항목을 추가 할 수 있습니다.


페이지 정보

조회 66회 ]  작성일19-08-08 16:52

웹학교