vue で cdn 最適化を使用する方法

この記事では主に 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>

次に、プロジェクト内で変更する必要があるのは、bulidフォルダーの下にあるwebpack.base.conf.jsファイルです。変更された場所は

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)の分離と結合

Vue+webpackで基本構成を詳しく解説

nodejs+express環境での多人数チャットルームの構築方法

vue2.0の使い方 フロントエンドの星評価関数コンポーネントを実装します

以上がvue で cdn 最適化を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。