정보실

웹학교

정보실

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

본문

...
"scripts": {
  "minify-css": "postcss src/css/main.css > src/css/main.min.css"
}
...
"devDependencies": {
  "cssnano": "^4.1.10",
  "postcss-cli": "^6.1.2"
}
...

main.min.css는 main.css의 축소 버전입니다.


위 설정을 사용하면 명령 줄에서 프로젝트로 이동하고 CSS를 축소하기 위해 다음 명령을 실행할 수 있습니다. npm run minify-css (또는 원사를 사용하는 경우 원사 minify-css).


HTML 문서에서 두 CSS 파일을 로컬로 로드하고 제공하면 (Chrome DevTools에서 크기를 비교하기 위해 프로젝트 루트에서 http-server로 로컬 서버를 실행할 수 있음) 축소 버전의 크기가 원본 파일의 약 절반입니다 


CSS File Comparison In Chrome DevTools 


위의 예제는 개념 증명 또는 매우 간단한 프로젝트를 위해 작동하지만 UI의 파일을 포함하여 여러 CSS 파일을 포함하므로 기본 복잡도를 초과하는 모든 프로젝트에 대해 이와 같은 CSS를 수동으로 축소하는 것은 번거 롭거나 비생산적입니다. Bootstrap, Materialise, Material Design 등과 같은 라이브러리


실제로이 프로세스에서는 축소 된 버전을 저장하고 모든 스타일 시트 참조를 축소 된 파일 버전 (수동으로)으로 업데이트해야 합니다. 웹팩, 롤업 또는 소포와 같은 빌드 도구를 이미 사용하고 있을 가능성이 있습니다. 여기에는 코드 축소 및 번들링에 대한 지원 기능이 내장되어 있으며 워크 플로 인프라를 활용하기 위해 구성이 거의 또는 전혀 필요하지 않을 수 있습니다.


자신의 번들러 가져 오기 (BYOB) 


Parcel의 구성이 가장 적으므로 작동 방식을 살펴 보겠습니다. yarn add parcel-bundler -D 또는 npm install parcel-bundler --save-dev를 실행하여 Parcel 번들러를 설치하십시오.


그런 다음 package.json 파일에 다음 스크립트 항목을 추가하십시오.


"dev": "parcel src/index.html",
"build": "parcel build src/index.html"

package.json 파일은 다음과 같아야 합니다.


{
  ...
  "scripts": {
    "dev": "parcel src/index.html",
    "build": "parcel build src/index.html"
  },
  ...
  "devDependencies": {
    "parcel-bundler": "^1.12.3"
  }
  ...
}

dev 스크립트를 사용하면 개발 모드에서 index.html 파일 (앱의 진입 점)에 대해 소포를 실행하여 HTML 파일에 연결된 모든 파일을 자유롭게 변경할 수 있습니다. 새로 고침 하지 않고 브라우저에서 직접 변경 사항을 볼 수 있습니다.


기본적으로 프로젝트에 dist 폴더를 추가하고 파일을 해당 폴더로 즉시 컴파일하여 브라우저에서 제공 함으로써 이 작업을 수행합니다. 이 모든 것은 yarn dev 또는 npm run dev로 dev 스크립트를 실행 한 다음 브라우저에서 제공된 URL로 이동하여 발생합니다.


Running Parcel Bundler 


방금 확인한 dev 스크립트와 마찬가지로 빌드 스크립트는 Parcel 번들러를 프로덕션 모드로 실행합니다. 이 프로세스는 대상 index.html 파일에서 참조되는 CSS 파일 축소를 포함하여 코드 변환 (예 : ES6에서 ES5) 및 축소를 수행합니다. 그런 다음 HTML 파일의 리소스 링크를 출력 코드 (변환, 축소 및 버전 복사본)로 자동 업데이트합니다.


이 프로덕션 버전은 기본적으로 dist 폴더에 있지만 package.json 파일의 스크립트 항목에서 이를 변경할 수 있습니다.


Parcel Bundler Output 


위의 프로세스는 Parcel.js에만 해당되지만 webpack 및 Rollup과 같은 다른 번 들러를 사용하여 동일한 결과를 얻을 수 있는 유사한 접근 방식 또는 플러그인이 있습니다. 시작점으로 다음을 살펴보십시오.







  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 45회 ]  작성일19-08-08 17:05

웹학교