最適化するプロジェクトのニーズのローカル分析（2つのプラグイン）
図1に示すように、ファイルサイズ分析が導入される。束のWebPACK-アナライザ
1.ダウンロードおよびインストール
NPM-WebPACKのインストールバンドル--save-DEV-アナライザ
2 vue.config.js構成
module.exportを：{
chainwebpack：（設定）=> {
IF（process.env.NODE_ENV === '生産'）{
IF（process.env.npm_config_report）{
設定
.plugin（ 'バンドルのWebPACK-アナライザ'）
.USE（必要（ 'バンドルのWebPACK-アナライザ'）。 BundleAnalyzerPlugin）
.END（）;
}
}他{
}
}
}
package.json 3.処分命令
{
"スクリプト"：{
"真のNPM RUN = npm_config_report構築するために"： "レポート"
}
}
コマンドを使用して4.
NPMをレポートの実行
2、ウェブページの動作効率を検出灯台
1.ダウンロードしてインストール
灯台-gインストールNPM
2.の
灯台は、URL --view検出されます
GZIP圧縮（圧縮されたファイルサイズ、より速くロード）
。パッケージ化され、ローカルに生成されたgzipで圧縮されたファイル
vue.configで提供
CONST CompressionPlugin =必要とする（ '圧縮のWebPACK-プラグイン'）// GZIP圧縮プラグ
constのproductionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i; //圧縮されたファイルタイプへ
configureWebpack：設定=> {
（process.env.NODE_ENV === '生産'）{IF
config.plugins.push（新しい新しいCompressionPlugin（{
アルゴリズム： 'GZIP'、
テスト：productionGzipExtensions、
閾値：10240、
minRatio：0.8
}）
）
}
}
開いた構成サーバgzip圧縮をb.nginx
ユーザーエクスペリエンスを強化
待ち時間負荷に過大なアニメーションを追加する
のindex.htmlにセットします