元のアドレス: https://jingyan.baidu.com/album/454316ab29d0c0f7a7c03a1f.html?picindex=1
vue プロジェクトは gzip 圧縮を有効にし、nginx をデプロイして gzip 最適化パフォーマンスを有効にします。
最初のステップは、vue プロジェクトに依存関係をインストールし、productionGzip を true に変更して Gzip 圧縮を有効にすることです。
npm install --save-dev 圧縮-webpack-plugin
2 番目のステップは、npm run build を実行してプロジェクトをパッケージ化することです。このとき、「ValidationError: Compression Plugin Invalid Options」というエラーが報告されることがあります。公式 Web サイトのプロンプトによると、CompressionWebpackPlugin の設定をアセットからファイル名に変更する必要があります。
3 番目のステップは、npm run build を実行してプロジェクトを再度パッケージ化することです。このとき、「TypeError: Cannot read property 'emit' of unknown」というエラーが報告され続ける場合があります。確認したところ、インストールされているcompression-webpack-pluginの依存関係に問題があるため、compression-webpack-pluginをアンインストールし、下位バージョンv1.12のインストールに変更する必要があります。
4 番目のステップは、現在インストールされている Compression-Webpack-plugin をアンインストールすることです: npm uninstall --save-dev Compression-webpack-plugin
5 番目のステップは、compression-webpack-plugin の下位バージョンをインストールすることです: npm install --save-dev [email protected]
6 番目のステップは、npm run build を再度実行してプロジェクトをパッケージ化することです。この時点で、vue プロジェクトは通常どおりパッケージ化され、vue 開発はオンラインで楽しく (ku) すぐに (bi) 実行されます。
7 番目のステップは、nginx サーバーの gzip パフォーマンスの最適化を有効にすることです。nginx 構成ファイルを見つけて、http 構成に次のコードを追加して、nginx サービスを再起動します。
http:{
gzip をオンにします。
gzip_static オン;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types テキスト/プレーン アプリケーション/JavaScript テキスト/CSS アプリケーション/xml テキスト/JavaScript アプリケーション/x-httpd-php 画像/jpeg
画像/gif 画像/png;
}
要約すると、Vue の gzip パフォーマンスの最適化は主に 2 つの部分に分かれており、正常に開くと、Vue ホームページの読み込み時間が大幅に最適化されます。
わからないことがあれば、[H5 フロントエンド開発コミュニティ] WeChat 公式アカウントをフォローしてメッセージを残してください。タオバオのクーポンもゲットできます！
