ウェブサイトのパフォーマンスを向上させる

今日はHTMLファイルを最適化する方法を説明します.
我々は3つのことを最初に行うことによって達成することができますminifying then compressing 最後にcache them .
まず、違いを説明しましょうminify and compress .

Minify : 空白、コメント、不要な文字を削除します.

中compressing : 元のgzip、deflateを圧縮するアルゴリズムを使用してデータのサイズを縮小するプロセス.

サーバーとブラウザの間に何が起こりますか？

ブラウザ要求インデックス.HTMLファイル.

サーバは.zip ファイルをブラウザに(index.html.zip) レギュラーの代わりにindex.html バージョン.

ブラウザをダウンロードしてzipped file , 抽出し、ユーザーにそれを示します.

しかし、サーバがどのようにそれを知っているのは、普通のインデックスファイルではなく、zipファイルを送信するには?
2つの部分についての協定がある.
1 -ブラウザはヘッダを圧縮内容を受け入れるサーバに通知します( gzipとdeflateは二つの圧縮スキームです).アクセプトエンコーディング: gzip , deflate
2 -コンテンツが実際に圧縮されている場合、サーバはレスポンスを送信します.
本文を読むgreat article .
私はタスクランナーとブラウザの同期としてGulp 4を使用しています.したがって、以下のパッケージが必要になります.

gulp-htmlmin HTMLファイルを制限する.

gulp-gzip HTMLファイルを圧縮する.

connect-gzip-static 私たちを有効にするには、ローカルサーバー内のテストのためのHTMLのZIP HTMLを提供します.

エミュレートします。

NPMでインストールする

npm install --save gulp-htmlmin

2 -クリエイトminifyIndex タスクを制限するindex コメントと空白を削除するようなオプションを設定します.

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

圧縮

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 -ローカルサーバー用の圧縮ファイルを提供する
私は、次の方法を使用しようとしましたが、オプションは、オプションを介して追加されたときに、ミドルウェアのスタックが遅すぎるので失敗しました.サーバがzipファイルを提供しなかったので、HTMLファイル

const compression= require('compression');

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

オーバーライド・ブールを追加すると、このミドルウェアはシャインOsbourneによって言及されるようにスタックの前面に適用される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,
      },
    ],
  });
}

Note :サーバーがコンテンツエンコーディング応答ヘッダーを送信しない場合は、通常のインデックスバージョンをフォールバックとして追加する必要があります.これは、ファイルが圧縮されていないことを意味します(多くのサーバーではデフォルトです).

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

私のプロジェクトでHTMLの最適化を行った後、インデックスファイルのサイズを21kb to 3.5kb

圧縮された内容が提供されているかどうかをテストします。

1 -あなたのサイトと開発ツールを開きます.
2 -オープンネットワークのタブチェックを使用すると、最適化の前後にビューサイズを表示できるように大きな要求行を使用します.
3 -リロード.


4 -ヘッダーと応答ヘッダーを表示するようにクリック'Content-encoding: gzip' .

読書ありがとう!
この記事は、お友達とそれを共有すること自由に感じて、任意のフィードバックをいただければ幸いです.