웹 사이트의 성능을 향상시키는 5 가지 그 런트 작업

키 하이라이트 :

grunt는 압축 및 미니 화와 같은 프로세스를 자동화하여 웹 사이트 최적화를 간소화합니다. 필수 작업에는 이미지 압축의 경우 >가 포함됩니다. 는 javaScript 미니 화 및 가 포함됩니다. 기타 귀중한 grunt 작업은 이며, 사용되지 않은 CSS를 제거하고

는 html을 최소화합니다. HTML 미니는 파일 크기가 적은 단지 단지 파일 크기 감소만으로 만들 수 있지만, 모든 최적화는 웹 성능 향상을 위해 계산됩니다.

이러한 사용자 친화적 인 Grunt 작업은 웹 사이트로드 시간을 가속화하여 사용자 경험을 크게 향상시킵니다. 워크 플로에 원활한 통합이 효율성과 효과를 향상시킵니다.
• grunt-contrib-imagemin 웹 사이트 성능은 오늘날의 디지털 환경에서 가장 중요합니다. 이전 itepoint 기사 (예 : "리소스 타이밍 API 소개", "사용자 타이밍 API 발견"및 Craig Buckler의 "페이지 가중치 감소에 대한 완전한 안내서")에서 논의한 바와 같이 성능 병목 현상을 이해하고 해결하는 것이 중요합니다. Grunt 및 Gulp와 같은 작업 러너는 많은 수동 최적화 작업을 자동화하여 워크 플로를 향상시킵니다. 이 기사에서는 웹 페이지 성능을 향상시키는 5 가지 grunt 작업에 대해 자세히 설명합니다. grunt-contrib-uglify grunt-contrib-cssmin
• grunt-uncss 이미지는 웹 사이트 크기의 주요 기여자입니다. httparchive.org의 통계는 이미지가 종종 페이지의 총 크기의 63% 이상을 차지합니다. 종종 이미지는 최적으로 압축되지 않습니다. 는 일반적인 이미지 형식에 최적화를 제공하여 다음을 해결합니다. grunt-contrib-htmlmin
(gif)
• (jpeg)
(png)

(svg)

샘플 구성은 다음과 같습니다

이 구성은 에서 PNG, JPG 및 GIF 이미지의 공격적인 최적화를 위해 .

grunt-contrib-imagemin JavaScript 코드를 최소화합니다. 공백을 제거하고 변수/기능 이름을 단축합니다. 유용한 옵션에는

(디버깅의 경우) 및

(메타 데이터 추가)가 포함됩니다. 이 JavaScript를 고려하십시오 : grunt-contrib-imagemin 미니는 다음을 변형시킵니다

구성 예 :

• gifsicle
• jpegtran

  imagemin: {
     dist: {
        options: {
          optimizationLevel: 5
        },
        files: [{
           expand: true,
           cwd: 'src/images',
           src: ['**/*.{png,jpg,gif}'],
           dest: 'dist/'
        }]
     }
  }

  이것은 <🎜 🎜>의 모든 CSS를 최소화하고 출력을 <🎜 🎜>.

  <<> src/css dist/css/style.min.css

  <<>는 사용되지 않은 CSS를 제거하여 파일 크기를 줄입니다. 부트 스트랩 또는 기초와 같은 프레임 워크를 사용할 때 특히 유익합니다. <(> (셀렉터 제외) 및 (스타일 시트를 무시하는 경우)와 같은 옵션을 사용할 수 있습니다. 예 : <..> grunt-uncss <<>

  grunt-uncss ignore <<> HTML을 최소화하여 크기가 적은 크기 감소를 제공합니다. 특히 GZIP 압축의 경우 영향이 작을 수 있지만 모든 비트가 도움이됩니다. 구성 : <<> ignoreSheets 이이 모든 HTML 파일을 <🎜 🎜>의 모든 HTML 파일을 처리하고 주석을 제거하고 공백을 무너 뜨리고 출력을 <🎜 🎜>. <🎜 🎜> <<> 결론

  var MyApplication = function() {
     var data = 'hello';
  
     this.sum = function(first, second) {
        return first + second;
     }
  
     this.showData = function() {
        return data;
     }
  };

  이 5 가지 grunt 작업은 웹 사이트 성능을 크게 향상시키는 간단한 방법을 제공합니다. 사용 편의성으로 인해 사용자 경험을 향상시키기위한 귀중한 도구가됩니다. 이 작업을 사용 했습니까? 당신의 경험과 좋아하는 grunt 작업을 공유하십시오! Grunt 및 웹 사이트 성능에 대한 포괄적 인 FAQ 섹션은 아래에서 확인할 수 있습니다.

  (FAQ 섹션은 여기에 따라 오리지널 FAQ의 구조와 내용을 반영하지만 더 나은 흐름과 간결함을 위해 다시 제작됩니다.)

위 내용은 웹 사이트의 성능을 향상시키는 5 가지 그 런트 작업의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!