この記事では主に Vue プロジェクトで CDN 最適化を使用する方法を紹介し、参考にさせていただきます。
プロジェクトの作成において、最適化の問題は無視できません。特に最初の画面の最適化が最優先事項です。cdn と非同期読み込みの 2 つの最適化方法については、//www.jb51 を参照してください。 html
1. cdn
まず第一に、Baidu とは何ですか?その機能は次のとおりです: ページをロードするときに、必要な依存関係の一部を現在のセッションにロードしてから、実行を開始する必要があります。最初の画面ではモジュールが多く、待ち時間は長くなります。ブラウザのメモリは最大 40 個のプロセスを実行でき、次のコードを実行する前に前のプロセスがロードされるまで待つ必要があります。CDN を使用してサードパーティのリソースを導入すると、サーバーへの負荷が軽減されます。プレッシャーを分散して他のサーバーにポイントを与えることです。コードの具体的な実装は次のとおりです:
(1) 1 つ目は、ブートストラップによって提供されるリソースを使用します。URL は、http:// にログインして参照できます。 www.bootcdn.cn/
vue が一番上にあります 以下のように外側のindex.jsファイルに導入します<script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <script src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
module.exports = { entry: { app: './src/main.js' }, externals:{ 'BMap': 'BMap', 'vue': 'Vue', 'vue-router': 'VueRouter' },
ここで、vue と vue -router をグローバルに公開するように変更する必要があります。ここでの小文字の vue と vue-router は、リソースを導入するときに対応する名前です。コロンの後の大文字の名前です。もちろん、これら 2 つの名前は同じであってもかまいません。次のステップでは、プロジェクト内で対応するリソースが参照されている元の導入メソッド、つまり最初に導入したメソッドを削除します。たとえば、main.js フォルダーと router フォルダー内の Index.js を変更します。 . これは、単に知識を記録するためのものです。気に入らない場合は、コメントしないでください。
関連記事:
JavaScriptでNaNを判定する方法 jQueryを使用してマウス応答の透明度グラデーションアニメーション効果を実装する方法マウス応答の淘宝網アニメーション効果をjQueryで実装する方法
詳細解説 vue-adminとバックエンド(flask)の分離と結合
nodejs+express環境での多人数チャットルームの構築方法
vue2.0の使い方 フロントエンドの星評価関数コンポーネントを実装します
以上がvue で cdn 最適化を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。