CSS 파일에는 주석, 공백 및 들여쓰기와 같은 불필요한 문자가 포함될 수 있습니다. 프로덕션에서는 이러한 문자를 안전하게 제거하여 브라우저가 스타일을 처리하는 방식에 영향을 주지 않고 파일 크기를 줄일 수 있습니다. 이 기법을 축소라고 합니다.
축소되지 않은 CSS 로드 중
다음 CSS 블록을 살펴보세요.
body {
font-family: "Benton Sans", "Helvetica Neue", helvetica, arial, sans-serif;
margin: 2em;
}
/* all titles need to have the same font, color and background */
h1 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
h2 {
font-style: italic;
color: #373fff;
background-color: #000000;
}
다음 콘텐츠는 읽기 쉬우며 필요한 파일보다 큰 파일을 만듭니다.
- 들여쓰기를 위해 공백을 사용하며 주석이 포함되어 있습니다. 이러한 주석은 브라우저에서 무시되므로 삭제할 수 있습니다.
<h1>및<h2>요소에 동일한 스타일이 있습니다. 'h1 {...} h2 {...}'을(를) 별도로 선언하는 대신 'h1, h2{...}'로 표현할 수 있습니다.- background-color,
#000000는#000로만 표현할 수 있습니다.
이렇게 변경하면 동일한 스타일의 더 간단한 버전을 얻게 됩니다.
body{font-family:"Benton Sans","Helvetica Neue",helvetica,arial,sans-serif;margin:2em}h1,h2{font-style:italic;color:#373fff;background-color:#000}
이와 같은 CSS를 작성하고 싶지는 않을 것입니다. 대신 평소와 같이 CSS를 작성하고 빌드 프로세스에 축소 단계를 추가하면 됩니다. 이 가이드에서는 널리 사용되는 빌드 도구인 webpack을 사용하여 빌드하는 방법을 알아봅니다.
측정
다른 가이드(고양이 고양이)에서 사용한 사이트에 CSS 축소를 적용합니다. 이 버전의 사이트에서는 멋진 CSS 라이브러리인 animate.css를 사용하여 사용자가 고양이에게 투표할 때 다른 페이지 요소에 애니메이션을 적용합니다. YPM.
첫 번째 단계로, 이 파일을 축소한 후의 기회를 파악해야 합니다.
- 측정 페이지를 엽니다.
- URL
https://fav-kitties-animated.glitch.me을 입력하고 감사 실행을 클릭합니다. - 보고서 보기를 클릭합니다.
- 실적을 클릭하고 추천 섹션으로 이동합니다.
결과 보고서에 animate.css 파일에서 최대 16KB를 저장할 수 있는 것으로 표시됩니다.
이제 CSS의 콘텐츠를 검사합니다.
- Chrome에서 Fav Kitters 사이트를 엽니다. (Glitch 서버가 처음으로 응답하는 데 다소 시간이 걸릴 수 있습니다.)
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- CSS 필터를 클릭합니다.
- 캐시 사용 중지 체크박스를 선택합니다.
- 앱을 새로고침합니다.
페이지에서 각각 1.9KB 및 76.2KB의 CSS 파일 두 개를 요청합니다.
- animate.css를 클릭합니다.
- Response 탭을 클릭하여 파일 콘텐츠를 확인합니다.
스타일시트에는 공백 및 들여쓰기에 사용되는 문자가 포함되어 있습니다.
다음으로, 빌드 프로세스에 webpack 플러그인을 추가하여 이러한 파일을 축소합니다.
webpack을 사용한 CSS 축소
최적화에 착수하기 전에 Fav Kittics 사이트의 빌드 프로세스 작동 방식을 알아보세요.
기본적으로 webpack이 생성하는 결과 JS 번들에는 인라인된 CSS 파일의 콘텐츠가 포함됩니다. 별도의 CSS 파일을 유지하기 위해 두 개의 보완 플러그인을 사용합니다.
- mini-css-extract-plugin은 빌드 프로세스의 단계 중 하나로 각 스타일 시트를 자체 파일로 추출합니다.
- webpack-fix-style-only-entries는 webpack-config.js에 나열된 각 CSS 파일에 추가 JS 파일이 생성되는 것을 방지하기 위해 Wepback 4의 문제를 해결하는 데 사용됩니다.
이제 프로젝트의 몇 가지 사항을 변경합니다.
- Glitch에서 Fav Kitters 프로젝트를 엽니다.
- 소스를 보려면 View Source를 누릅니다.
- 수정할 리믹스를 클릭하여 프로젝트를 수정 가능하게 합니다.
- 터미널을 클릭합니다 (참고: 터미널 버튼이 표시되지 않으면 전체화면 옵션을 사용해야 할 수 있음).
생성된 CSS를 축소하려면 optimize-css-assets-webpack-plugin을 사용합니다.
- Glitch 콘솔에서
npm install --save-dev optimize-css-assets-webpack-plugin를 실행합니다. refresh를 실행하여 변경사항이 Glitch 편집기와 동기화되도록 합니다.
그런 다음 Glitch 편집기로 돌아가서 webpack.config.js 파일을 열고 다음과 같이 수정합니다.
파일 시작 부분에서 모듈을 로드합니다. js
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
그런 다음 플러그인 인스턴스를 plugins 배열에 전달합니다.
js
plugins: [
new HtmlWebpackPlugin({template: "./src/index.html"}),
new MiniCssExtractPlugin({filename: "[name].css"}),
new FixStyleOnlyEntriesPlugin(),
new OptimizeCSSAssetsPlugin({})
]
변경하면 프로젝트가 다시 빌드됩니다.
결과 webpack.config.js는 다음과 같습니다.
이제 실적 도구를 사용하여 이 최적화의 결과를 확인해 보겠습니다.
확인
- 사이트를 미리 보려면 앱 보기를 누른 다음 전체 화면
을 누릅니다.
이전 단계에서 도움이 필요한 경우 여기를 클릭하여 최적화된 버전의 사이트를 열 수 있습니다.
파일의 크기와 콘텐츠를 검사하는 방법은 다음과 같습니다.
- `Control+Shift+J` (Mac의 경우 `Command+Option+J`)를 눌러 DevTools를 엽니다.
- 네트워크 탭을 클릭합니다.
- CSS 필터를 클릭합니다.
- 아직 선택하지 않은 경우 캐시 사용 중지 체크박스를 선택합니다.
- 앱을 새로고침합니다.
이러한 파일을 검사하여 새 버전에 공백이 포함되지 않았는지 확인합니다. 두 파일 모두 크기가 훨씬 작습니다. 특히 animate.css가 ~26% 감소하여 약 20KB를 절약했습니다.
마지막 단계는 다음과 같습니다.
- 측정 페이지를 엽니다.
- 최적화된 사이트의 URL을 입력합니다.
- 보고서 보기를 클릭합니다.
- 실적을 클릭하고 추천 섹션을 찾습니다.
보고서에 더 이상 'CSS 축소'가 '기회'로 표시되지 않고 '통과된 감사' 섹션으로 이동되었습니다.
CSS 파일은 렌더링을 차단하는 리소스이므로 대용량 CSS 파일을 사용하는 사이트에서 축소를 적용하면 콘텐츠가 포함된 첫 페인트와 같은 측정항목의 개선사항을 확인할 수 있습니다.
다음 단계 및 리소스
이 가이드에서는 webpack을 사용한 CSS 축소를 다루었지만 Gulp의 gulp-clean-css 또는 Grunt의 grunt-contrib-cssmin과 같은 다른 빌드 도구를 사용할 수도 있습니다.
축소는 다른 유형의 파일에도 적용할 수 있습니다. JS를 축소하는 도구와 압축과 같은 보완 기법에 대해 자세히 알아보려면 네트워크 페이로드 축소 및 압축 가이드를 확인하세요.