webpack学習:上級知識ポイント

1.Tree Shaking
JavaScriptコンテキストの未参照コードを削除するには、modeオプションをproductionに設定し、ES Module構成のみをサポートする必要があります.

package.json->use Export:true/false trueをオープンするために

sideEffects:false/[],falseはすべてのファイルに対してTree Shakingを開いていますが、導入時には一つのexportまたは複数のexportだけを露出するのではなく、特殊な挙動のコードを実行します.例えばimport '@bable/poly-fill'は、グローバルスコープに影響を及ぼし、通常はexportを提供しない.このときはsideEffects配列に手動で追加して削除を防ぐ必要があります.

2.codeSpliting
jsコード分割
コンセプト:コード分割はwebpackとは無関係ですが、webpackは開発者が自動的にコード分割を行うように助けることができます.
どうしてwebpackの中でsplityChunksはデフォルトでasyncだけに導入されたコードですか?js最適化の二つの方向:キャッシュとコード使用率キャッシュ:splitychunks:'all'と同じchunkコードは重複してロードしません.アップグレードが小さいので、第二回アクセス時の速度コード使用(カバー)率(coverage):preLoading(初期ページ同時プリローディング)、preFetch(ネットワークアイドルプリローディング)が大きく向上します.
CSSコード最適化
分割:MiniCssExtract Plugin(HMRはサポートされておらず、productionでの使用に適しています)圧縮:Optimze CSSAssets Plugin
3.包装分析常用ツール
webpack/analys、bundle analys
4.webpackとブラウザキャッシュ
ブラウザキャッシュの原因で、毎回パッケージ化して作成したファイル名が同じなら、新しいコードがオンラインになってもブラウザがアクセスできるローカルキャッシュがあります.outputはnameとchunkFilenameを配置することができます.

output: {
    filename: '[name].[contenthash].js',
    chunkFilename: '[name].[contenthash].js'
}

5.シミング
一部のコードのデフォルトの挙動を変更します.例えば、modulesがtrueの場合、モジュールごとに独自の動作環境があり、導入されたmoduleはこのモジュールに導入されたmoduleに導入された変数を使用できません.pluginsにwebpack.Provider Pluginを配置すると、挿入変数の機能が実現できます.例えば、a.jsはb.jsを導入して、a.jsの中のimportはjqueryを導入して、bの中でjqueryに使用する必要があります.正常モードでは、bの中で再度jqueryを導入しなければなりません.しかし、いくつかの第三者モジュールに対して、そのデフォルトコードを変えることができません.

plugins:[
    new webpack.ProvidePlugin({
        $: 'jquery'
    }),
]

このように、導入されたモジュールの中の$は、jqueryコードを追加しないで正確に使用することができます.
6.Library基本配置

...
externals:'lodash',
output:{
    ...
    libraryTarget：'umd',//window、this、global
    library:'libraryName'
}

externalsは使用時に定義された名前を表しています.libraryTargetでは、umdはパッケージ化されたライブラリを表しています.様々な方法で、window、this、globalはこのライブラリの導出変数をlibraryTargetの変数として導入できます.