状況を直視
キャッシュなしでは、ブラウザの初回読み込みに8～9秒かかります。
パッケージは比較的大きく、フォルダ全体で18.7Mあります。
、最初にマップファイルを削除し、ファイルをマップしないように設定したりするので、奇妙な再生されます！
<link rel="dns-prefetch" href="url">
この構成が、次のような影響を及ぼすことが判明しました。
div a{
}//まず、すべての
a{
}//より高速になる
- あるこのプロパティの公式説明
2.デバッグ・プロセスを強化するために、ソース・マップ形式を選択してください。異なる値は、ビルドと再構築の速度に大きく影響します。
evalに変更すると、ファイル全体が11Mになります。
CSS ヘッダーに記述する
js 最下部に置くか、非同期で遅延させる
パッケージが大きすぎるのは、あるパッケージを紹介するためだと思うのですが、ピンインか音声入力のどちらかだと思うのですが、いろいろ探して、最終的にechartが大きすぎることがわかりました。
、取得することはできません、または公式ウェブサイトを見ると、それは
configureWebpack
この値がオブジェクトの場合、webpack-mergeによって最終的な設定にマージされます。
この値が関数の場合、解析されたコンフィギュレーションを引数として受け取ります。この関数は、設定を変更して何も返さないこともできますし、設定のクローン版やマージ版を返すこともできます。
1、私はここでオブジェクトの方法を構成するために、公式文書は、本番環境や開発環境かどうかを判断したい場合は、方法の機能を使用することを意味し、方法のオブジェクトの使用を区別しないでください！
2、Externalsexternalsは、特定のインポートパッケージをバンドルにパッケージ化することを防ぎ、代わりに実行時にそれらの拡張依存関係を外部から取得します。例えば、CDNからjQueryをインポートする代わりに
<link rel="preload" href="url" />
<linkrel="prerender" href="url" />
リクエストの送信
アプリケーションをマルチページモードでビルドします。それぞれの "ページ "には、対応するJavaScriptエントリーファイルが必要です。その値は、エントリーの名前をキーとするオブジェクトでなければなりません：
イメージの最適化：
イメージの削減：ピクセル数を減らし、各ピクセルで表示できる色を減らす。
最適化戦略：
1.イメージを使用できない場合は、イメージを使用せず、小さなイメージは代わりにcssで置き換えることができる；
可能ならwebPフォーマットを使う。
2.大きなイメージにはjpegを使う
3.小さなイメージにはbase64を使う\png\svg
4.
その他のファイル
CSS ヘッダーに記述する
js 最下部に置くか、非同期で遅延させる
webworker
サーバー側でファイル圧縮を有効にする
CDNを使ってロードする
CDNを使用して、静的リソースを可能な限りロードする。，
単一のドメイン名のブラウザには同時リクエストの制限があるため、複数のCDNドメインの使用を検討できる。
CDNで静的リソースをロードする場合、CDNのドメイン名とメインサイトが異なるように注意する必要がある。
ページを設定した後、index.htmlをasp文を使ってスクリプトタグとリンクタグを動的に生成するように設定する必要があります。
cdn を設定すると、パッケージ化されたファイルはかなり小さくなります
、axiosのcdn導入から、main.jsでプロトタイプにぶら下がっaxiosで、他のファイルで thisに、問題が発生しました。axiosの設定が有効になりません！
Staff-login.jsでは、次のように設定しても、リクエストはトークンではなく、axiosまたはインポートcdnにすることはできません。
プリレンダリングとプリロード
- 分析プラグイン webpack-bundle-analyzer をインストールします。
1. コピー可
パッケージング後、ポート8919のサイトが自動的に表示され、サイトの内容は以下のようになります：
chainWebpackはChainableConfigのwebpack-chainベースのインスタンスを受け取る関数です。これにより、webpackの内部設定をより細かく変更することができます。
7.構成の最適化、開梱
これを加えると少し小さくなり、合計10.3
- セレクタ階層の削減
その結果、最初の18.7Mから最後の3.36Mまで、やはりパッケージのサイズはかなり最適化されていると感じますし、ロード時間も8秒以上から1秒程度になりました
最後に vue.config.js を貼り付けます。
