vue.config.js はオプションの設定ファイルです。このファイルがプロジェクトのルートディレクトリ (package.json と同じレベル) に存在する場合、@vue/cli-service によって自動的に読み込まれます。 package.json の vue フィールドを使用することもできますが、この方法では JSON 形式に厳密に従う必要があることに注意してください。 序文最適化は実際のプロジェクトでも頻繁に行う必要があるものです。特に中規模・大規模プロジェクトでは、パッケージサイズの削減や初回画面の読み込み時間の短縮が必須です。面接でも頻繁に聞かれる質問です。この記事では、vue.config.js の設定とプロジェクトの最適化前後の効果を紹介します。 vue.config.js 構成オプションファイルはオプションを含むオブジェクトをエクスポートする必要があります 設定オプション よく使用される構成を次に示します。
詳細な設定手順については公式ウェブサイトをご覧ください。 パッケージサイズを縮小するためのパッケージの最適化通常のパッケージングにはデフォルトの構成があり、変更せずにパッケージングを成功させることができますが、パッケージのサイズが大きくなります。 Vue スキャフォールディングに付属する分析ツールを使用して、最適化前の状況を確認し、コマンドラインに次のように入力します。 ビューUI これは私自身のプロジェクトのフロントエンド部分のパッケージ分析です 画像とビデオの圧縮最適化できる画像ファイルとビデオファイルは 3 つあることがわかります。このうち MP4 は、解像度を維持するための圧縮が難しいため、一時的に無視されています。 コンパイル時に依存関係を使用して再度圧縮することもできます: image-webpack-loader ... チェーンWebpack: config => { // 画像を圧縮する config.module .rule('画像') .use('イメージウェブパックローダー') .loader('イメージwebpackローダー') .オプション({ //{ バイパスオンデバッグ: true } mozjpeg: { progressive: true, quality: 65 }, // JPEG画像を圧縮する optipng: { enabled: false }, // PNG画像を圧縮する pngquant: { quality: [0.65, 0.9], speed: 4 }, // PNG画像を圧縮する gifsicle: { interlaced: false } // GIF画像を圧縮する // webp: { quality: 75 } // SVG画像を圧縮する }) 。終わり() } ... jsコード圧縮コード圧縮には依存関係が必要です: uglifyjs-webpack-plugin cnpm i -D muglifyjs-webpack-プラグイン パッケージ化時にスペースが処理されるため、本番環境ではコンソールとコメントを削除することがこのプラグインを使用する目的です。 ... Webpack を構成する: { ... process.env.NODE_ENV === 'production' ?新しいUglifyJsPlugin({ 醜いオプション: { 出力: { // コメントを削除する comments: false }, 圧縮: { drop_console: true、 drop_console: true //コンソールステートメントをクリアする // pure_funcs: ['console.log'] //カスタム削除関数} }, ソースマップ: false }) : () => {} ... } 、、、 CDNアクセラレーション通常の webpack パッケージ化では、chunk-vendors.js ファイルが生成されます。これは、独自のものではなく、他社から提供されたすべてのモジュールをバンドルしたバンドルです。これらはサードパーティ モジュールまたはベンダー モジュールと呼ばれます。つまり、project/node_modules ディレクトリのすべてのモジュールです。したがって、依存モジュールがどんどん追加され、モジュールが大きくなると、chunk-vendors.js もどんどん大きくなります。 私たちが独自に作成した Web サイトを他の人が使用できるようにサーバー上に公開する必要がある場合、ユーザーが Web サイトにアクセスする速度を速めるにはどうすればよいでしょうか。
パブリック クラウド ベンダーは、世界中に無数のデータ センターとサーバーを所有しています。簡単に言うと、CDN サービスとは、これらのベンダーがサーバー上のドキュメントをさまざまな地域の自社サーバーに配信することを意味します。 CDNの紹介 CDNが提供するサードパーティライブラリのアドレスをインポートします。ここでは、いくつかの重要で大きな依存関係を参照します: <!-- 公開/index.html --> <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vuex/3.5.1/vuex.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.1/axios.min.js"></script> <link rel="スタイルシート" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css" rel="外部 nofollow" > <script src="https://cdn.bootcss.com/element-ui/2.13.2/index.js"></script> <script src="https://unpkg.com/[email protected]/lib/index.js"></script> <script src="https://cdn.bootcss.com/echarts/5.0.2/echarts.min.js"></script> インポートしたライブラリを追加する vue.config.jsにCDNから参照する必要がある依存ライブラリを追加します。 ... Webpack を構成する: { ... 外部: { //マウントするサードパーティライブラリの形式を指定します: サードパーティライブラリ名: 'プロジェクト内のライブラリのエイリアス' // element-ui エイリアスは ELEMENT のみ使用できることに注意してください。それ以外の場合は undefined が表示されます。vue: 'Vue', vuex: 'Vuex', 'vue-router': 'VueRouter', axios: 'axios', echarts: 'echarts', '要素-ui': '要素' }, ... } ... プロジェクト内で依存関係が使用されている場所に注釈を付ける ヒント:プロジェクトが大きく、コメントが必要な箇所が多い場合は、まず CDN からインポートしたライブラリの package.json を削除してからプロジェクトを実行することをお勧めします。モジュールが不足していることが確実に通知され、通知された箇所にコメントが記入されるため、漏れがなくなります。 起こりうるエラー element-ui のエイリアスは 'ELEMENT' にのみ設定できます。オンデマンドでインポートする場合は、ELEMENT.Message...error(...) を使用します。変更しようとしましたが、xxx が未定義であると報告されます。 大きなファイルの場所の比較 CDN の前後における大容量ファイルの分布を比較する CDN アクセラレーション前: CDN アクセラレーション後: ファイル サイズははるかに小さく、基本的に大きな依存関係はありません。 結果 比較すると、前後の効果は非常に明白です 最初の画面の読み込み時間の最適化上記のプロセスは、実際には最初の画面の読み込み時間を最適化していますが、最初の画面の読み込み時間をさらに最適化することができます。 上記のパッケージ最適化のみを実行した場合、最初のスクリーンタイムが比較されます。 CDN を使用しているため、要件の数が増えました。 ルーティング遅延読み込みの最適化意味 遅延読み込みとは、ルートの読み込みを遅らせたり、オンデマンドでルートを読み込む、つまり必要なときに読み込み、必要のないときには読み込まないことを意味します。これにより、プロジェクト Web ページの読み込み速度を高速化できます。 一般的な実装方法 1. Vue非同期コンポーネントはルートの遅延読み込みを実現します コンポーネント:resolve=>(['ロードするルートのアドレス',resolv]) 2. es が提案したインポート (推奨) // 次の 2 行のコードでは、webpackChunkName は指定されておらず、各コンポーネントは js ファイルにパッケージ化されています。 const Index = () => import('@/components/index') const About = () => import('@/components/about') */ // 次の 3 行のコードは同じ webpackChunkName を指定し、1 つの js ファイルに結合されてパッケージ化されます。 コンポーネントをグループに分割する const Home = () => import(/* webpackChunkName: 'visualization' */ '@/components/home') const Index = () => import(/* webpackChunkName: 'visualization' */ '@/components/index') const About = () => import(/* webpackChunkName: 'visualization' */ '@/components/about') 私のプロジェクトのパッケージングを例に挙げると、webpackChunkNameを指定せずにパッケージ化されたjsフォルダには17個のファイルがあります。 2つのページルートを同じwebpackChunkNameとして指定した後、展開されたフォルダーは16個だけになります。 理由は、同じwebpackChunkNameが結合され、1つのjsファイルにパッケージ化されるためです。 gzip 圧縮の最適化簡単に言うと、gzip はファイルをパッケージ化した後に圧縮して、サイズを小さくし、転送速度を速めます。その結果、URL をクリックすると、関連するコンテンツがすぐに表示されます。ただし、すべてのブラウザーが gzip をサポートしているわけではありません。クライアントが gzip をサポートしているかどうかを知りたい場合は、圧縮のサポートを示す Accept-Encoding がリクエスト ヘッダーにあります。クライアントの http リクエスト ヘッダーは、ブラウザーでサポートされている圧縮方法を宣言し、サーバーは有効にする圧縮、圧縮ファイルの種類、および圧縮方法を構成します。クライアントがサーバーにリクエストを行うと、サーバーはリクエスト ヘッダーを解析します。クライアントが gzip 圧縮をサポートしている場合、リクエストされたリソースは圧縮され、応答としてクライアントに返されます。ブラウザーはそれを独自の方法で解析します。http 応答ヘッダーには content-encoding:gzip が表示されており、これはサーバーが gzip 圧縮を使用していることを意味します。 フロントエンドでGZIPを有効にする ここではプラグインが必要です: compression-webpack-plugin npm インストール圧縮 webpack プラグイン vue.config.jsで設定する Webpack を構成する: { ... 新しい圧縮プラグイン({ ファイル名: '[パス].gz[クエリ]', アルゴリズム: 'gzip'、 テスト: /\.js$|\.html$|\.css/, しきい値: 10240, // この値より大きいリソースのみが処理されます 10240 minRatio: 0.8, // この値より低い圧縮率のリソースのみが処理されます // 元のファイルを削除します // 開発環境で使用する場合は false に設定してください。そうしないと、編集後にページが開きません // 本番環境で使用する場合は true に設定してください。そうすると、パッケージ化されたサイズが小さくなります deleteOriginalAssets: false })、 ... } 、、、 // gzip 圧縮 サーバーのnginxでGZIP圧縮を有効にする GZIP圧縮が正常に有効化されているかどうかを確認します 参考文献Vue プロジェクト最適化ドキュメント vue.config.js の設定からプロジェクトの最適化まで、vue2.x に関するこの記事はこれで終わりです。より関連性の高い vue プロジェクトの最適化コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux 上での Go 環境の構築のインストールと設定の説明
>>: Linux での MySQL データベースのマスター スレーブ同期レプリケーション構成
人気があり強力な Apache Web サーバーで 2 つ以上のサイトをホストする方法。前回の記事で...
Web フロントエンド開発では、ページに多くの記事を表示することが避けられません。記事の最後にあるク...
要素までスクロールするたびに読み込みアニメーションを追加するにはどうすればよいですか?初期パラメータ...
/etc/fstabパーティション/ディスクを自動的にマウントし、マウントするパーティション/デバイ...
ページをナビゲートする2つの方法宣言型ナビゲーション: リンクをクリックしてナビゲーションを実現する...
序文ウェブサイトのアクセス元をカウントしたい場合は、PHP を使用して情報を取得してデータベースに記...
この記事の例では、スライダー間隔コンポーネントを実装するためのjsの具体的なコードを参考までに共有し...
前回の CSS 回転灯と同じ内容の CSS アニメーションの応用です。これは単なる別のアプリケーショ...
1. 原因要件は 2 行を表示することであり、余分なテキストは 3 つのドットに置き換えられるため、...
問題:あるサーバー上の PHP プログラムは、localhost アドレス経由でデータベースに接続で...
目次序文主な実装コードHTMLコードJSコード序文南の友達の多くは、雪をほとんど見たことがない、ある...
ザビックス2019/10/12 チェンシン参照するhttps://www.zabbix.com/do...
この記事では、フォームの完全選択または逆選択を実現するためのJavaScriptの具体的なコードを参...
目次スロークエリの基礎: データ取得の最適化データベースから不要なデータが要求されていないか確認する...
序文: MySQL では、システムが多くの文字セットをサポートしており、異なる文字セット間にはわずか...