Gulp 4 및 브라우저 동기화로 HTML을 최적화하여 웹사이트 성능 향상

오늘은 HTML 파일을 최적화하여 가능한 한 크기를 줄이는 방법에 대해 설명하겠습니다.
먼저 minifying 다음 compressing 마지막으로 cache them 3가지 작업을 수행하여 이를 달성할 수 있습니다.

먼저 minify 와 compress 의 차이점을 설명하겠습니다.

Minify : 공백, 주석 및 불필요한 문자를 제거합니다.

동안 compressing : ex gzip을 압축하는 알고리즘을 사용하여 데이터(인코딩 정보)의 크기를 줄이는 과정, deflate.

서버와 브라우저 사이에 어떤 일이 발생합니까?

브라우저 요청 index.html 파일.

서버는 일반.zip 버전 대신 (index.html.zip) 파일을 브라우저index.html로 보냅니다.

그런 다음 브라우저는 zipped file 를 다운로드하고 압축을 푼 다음 사용자에게 표시합니다.

하지만 일반 색인 파일이 아닌 압축된 파일을 보내도 괜찮은지 서버가 어떻게 알 수 있을까요???

그들은 두 부분으로 계약을 맺었습니다.

1 - 브라우저는 서버에 압축된 콘텐츠를 수락한다고 알리는 헤더를 보냅니다(gzip 및 deflate는 두 가지 압축 방식임). Accept-Encoding: gzip, deflate

2- 콘텐츠가 실제로 압축된 경우 서버에서 응답을 보냅니다. Content-Encoding: gzip

자세한 내용은 이 문서great article를 참조하십시오.

작업 실행기 및 브라우저 동기화로 꿀꺽 꿀꺽 4를 사용하고 있습니다. 따라서 다음 패키지가 필요합니다.

gulp-htmlmin html 파일을 축소합니다.

gulp-gzip html 파일을 압축합니다.

connect-gzip-static 개발 중 테스트를 위해 로컬 서버에서 압축된 HTML을 제공할 수 있도록 합니다.

a- 축소 :

1- npm으로 설치:

npm install --save gulp-htmlmin

2- 축소minifyIndex 작업을 생성index하고 주석 및 공백 제거와 같은 옵션을 설정합니다.

function minifyIndex() {
  return src('./index.html')
    .pipe(htmlmin({ collapseWhitespace: true, removeComments: true }))
    .pipe(dest('dist/'));
}

b-압축:

1- npm으로 설치:

npm install --save-dev gulp-gzip connect-gzip-static

2- 파일을 압축하기 위한 생성compressIndex 작업index

function compressIndex() {
  return src('./index.html')
    .pipe(gzip())
    .pipe(dest('dist/'));
}

3- 로컬 서버용 압축 파일 제공
다음 방법을 사용하려고 했지만 미들웨어가 .html 파일 옵션을 통해 추가될 때 스택에서 너무 늦어 서버가 압축 파일을 제공하지 않아 실패했습니다.

const compression= require('compression');

browserSync({
    server: {
        baseDir: './',
        middleware: [compression()]
    }
})

재정의 부울을 추가하면 Shane Osbourne이 언급한 대로 이 미들웨어가 스택의 FRONT에 적용됩니다here.

function serveTask() {
  // init browserSync
  browserSync.init({
    // setup server
    server: {
      baseDir: './dist/',
    },
    middleware: [
      {
        route: '', // empty 'route' will apply this to all paths
        handle: gzipStatic('./dist/'), // the callable
        override: true,
      },
    ],
  });
}

참고: 서버가 콘텐츠 인코딩 응답 헤더를 보내지 않는 경우(많은 서버에서 기본값임) 파일이 압축되지 않은 경우를 대비하여 일반 인덱스 버전을 폴백으로 추가해야 합니다.

function initIndexHtml() {
  return src('./index.html')
    .pipe(htmlmin({ collapseWhitespace: true, removeComments: true }))
    .pipe(dest('dist/'));
}

내 프로젝트에서 html 최적화를 수행한 후 인덱스 파일 크기를 21kb에서 3.5kb로 줄이는 데 성공했습니다.

압축 콘텐츠가 제공되는지 테스트합니다.

1- 사이트와 개발자 도구를 엽니다.

2- 열린 네트워크 탭 확인은 큰 요청 행을 사용하여 최적화 전후에 크기를 볼 수 있습니다.

3- 다시 로드합니다.





4- 표시된 대로 클릭하여 헤더 및 응답 헤더를 표시합니다'Content-encoding: gzip'.



읽어 주셔서 감사합니다!

이 기사가 도움이 되었기를 바라며 친구들과 자유롭게 공유해 주세요. 어떤 피드백이든 감사하겠습니다 :)