あなたのバンドルサイズを最小にして、チャンクファイルとハッシュします

最後の投稿から、我々は我々のアプリで大きなライブラリを追加するときにバンドルのサイズを減らすためにCDNを使用してください!
今日、我々はいくつかの少しのヒントで我々のプロジェクトを最適化し続けます!

最小化
The minimize オプションは私たちのコード、変数の名前、コード間のスペースを実行するマシンのために理解しやすいです、我々は1行ですべてのコードを圧縮し、変数名を短くし、マシンはそれを実行することができます!
これが何minimize です!
それはあなたのコードを圧縮し、1行で圧縮されます!
prodモードでは、我々はこれを使用したい!devモードとは異なり、次のアカデミーでこの部分を参照してください😉)
使用する前に、バンドルソースコード(サイズ:7 KB)👇

すべての人間は、このコードを読むことができます!
でも使うならminimize 👇

そして、我々は3 KBを得ました!

チャンクファイル
コンテキスト:あなたのWebアプリを2つの大きな部分に分割されて想像してください
最初の部分は製品のリストです、そして、他は3 Dで買われる我々の製品を示すページです.
いくつかの訪問者はすべての製品を購入しませんが、3 Dモデルのすべては、アプリケーションが1つだけバンドルに読み込まれます.
ユーザーが我々の製品を選ぶとき、我々は3 D部分だけをロードするべきです!
これを作るためには、我々のアプリケーションに分割する必要がありますchunk ファイル!
チャンクファイルは、必要なときだけ読み込まれるファイルです.
これを行うには、特別なインポートを使用する必要があります!
簡単な例を挙げましょうbig json file ときにユーザーがボタンをクリック!

const jsonObjectImport = async () => import(/* webpackChunkName: "myChunkName" */ "./big-object.json")

我々が我々がこの約束を消費することのおかげでJSON価値を得る必要があるように、輸入は現在約束です👇

document.getElementById("button").addEventListener("click", function() {
    jsonObjectImport().then(jsonObject => console.log(jsonObject.default))
})

ユーザーがボタンをクリックした場合のみJSONファイルがロードされます.したがって、このビルドを行うと、2つの束がありますbundle とchunk bundle 名前myChunkName !
ときに我々は起動時にチャンクバンドルをロードしなかったHTMLをロードする!

でもボタンをクリックすれば🔥

はい、チャンクファイルが読み込まれ、JSONオブジェクトを取得します!
非常に興味深い、我々は我々のアプリケーションを分割!あなたのアプリのいくつかの大きな部分を持っているとき、それをチャンクすることを躊躇しないでください!
それはlazy loading , それは大きなイメージギャラリーのような、我々はユーザーが見ることができるイメージだけをロードするので、スクロールすることはできませんので、なぜすべての画像をロード!

ハッシュファイル
我々のアプリを最適化する最後のヒント!キープ・フォーカス💪
チャンクファイルを使用する場合は、アプリケーションの10の部分を持つことができますし、アプリケーションを最初に展開すると、ユーザーはアプリケーションを読み込み、すべてのチャンクをキャッシュに保持します.
新しいバージョンをリリースする場合は、チャンクファイルを1つだけ変更すると、新しいバージョンを展開します.
この動作をhash ファイル.
設定ファイル👇

filename: "[contenthash:8].js"

変更バンドル名[contenthash:8] , それは私たちのバンドルとすべてのチャンクのための新しいハッシュ名を生成します!
しかし、目的は何ですか?🤔
つのハッシュチャンクファイルを変更すると、新しいバージョンをリリースしますhash chunk file ! 🎉
私はこの記事が好きで、次の記事でWebpackでのdev環境の設定方法をチェックします.
You can check the source code at this commit
閉じるこの動画はお気に入りから削除されています.
🎁 私の新しい本を手に入れるUnderrated skills in javascript, make the difference あなたが私とMP私に続くならば😁
またはそれを得るHERE
🎁 MY NEWSLETTER
☕️ あなたはSUPPORT MY WORKS 🙏
🏃‍♂️ あなたは私に従うことができます👇
🕊 Twitter
👨‍💻 ギタブhttps://github.com/Code-Oz
そして、あなたは🔖 この記事!