フロントエンドの最適化プロジェクト01
1. WebPACKのバンドル・アナライザモジュールパッケージファイルの可視化ウィジェット
プラグインは、主にプロジェクト分析パッケージの後にファイルボリュームのサイズのために使用され、
2.
圧縮のWebPACK-pluginのJSファイルのgzip圧縮プラグイン
このプラグインはさらにJSファイル（圧縮空間≈70＆）を圧縮するために主に使用さgzipのアルゴリズムであり、
既存のプロジェクト構成：
package.json
// 2つの依存関係を追加
"
devDependencies
"：{
"圧縮のWebPACK-プラグイン"： "1.1.12"、//压缩
"WebPACKのバンドル・アナライザ"： "^ 3.3.2"、//可視化
}
//命令実行NPMを追加
" スクリプト "：{
"ビルド：GZIP"： "クロスENV NODE_ENV =生産GZIP =真のWebPACK --progress --hide-モジュール"、//初期化圧縮とパッケージングの生産環境変数
"アナライザ"： "クロスENV NODE_ENV =生産ANALYZER =真のWebPACK --progress --hide-モジュール"、//生産・包装可視化環境変数を初期化します
}
webpack.config.js
輸入モジュール：
VaRのBundleAnalyzerPlugin =（ 'WebPACKのバンドル・アナライザ'）が必要です。BundleAnalyzerPlugin
VaRのCompressionPluginの=は（ '圧縮のWebPACK-プラグイン'）が必要です
モジュール構成：
IF（process.env.ANALYZER）{//プレゼンス本可視化環境ANALYZER
module.exports.plugins = module.exports.plugins.concat（新BundleAnalyzerPlugin（））
}
（process.env.GZIP）{//ファイル圧縮は、環境ANALYZERがある存在する場合
module.exports.plugins = module.exports.plugins.concat（新しいCompressionPlugin（{
アルゴリズム：「GZIP」
テスト：/\.js/、
deleteOriginalAssets：真
}））
}
コメント：
webpack3圧縮のWebPACK - プラグインのバージョン1.1.2のみに対応
圧縮のWebPACK - プラグインのバージョン2.0.0 ^対応webpack4
朝の更新は2つのJSコードをパッケージ化されますアクセス例外が発生する可能性がありますので、この性質を取り除く、唯一のパッケージが.gzファイルならば、オープンgzipで機能しませんでしたnginxのサーバー側の恐怖である主な理由の設定を変更、設定の問題を言いました、の.js、一つは、関連するコンフィギュレーションファイルまたは.js.gzに応じの.jsを読み取ること.js.gz、nginxのサーバであります
.jpg)