vuejs プロジェクトのパッケージ化後の最初の画面読み込みの最適化とパッケージ化後に発生する問題

この記事では主に、vuejs プロジェクトをパッケージ化した後の最初の画面読み込みの最適化と、パッケージ化後に発生する可能性のある問題について紹介します

1: CDN リソースの使用

たとえば、vue、axios、vuex、および vue-router をプロジェクトにパッケージ化したくない場合は、package.json でプラグインが依存関係オブジェクトにパッケージ化されます。 、これを行う必要があります:

1: webpack.base.conf.js を開きます

module.exports = {
   externals: {
    ‘vue‘: ‘Vue‘,
    ‘axios‘: ‘axios‘,
    ‘vuex‘: ‘Vuex‘,
    ‘vue-router‘: ‘VueRouter‘
 }
}

2: router/index.js を開きます。次の 2 行をログアウトします

//import Vue from ‘vue‘
//Vue.use(Router)

3: vuex を使用している場合は、vuex/index.js (名前が異なります) の Vue.use (Vuex) をログアウトします

Vue.use(Vuex)

これはパッケージ化後に表示される可能性があります 問題

1: keep-alive で囲まれた要素は表示できません

理由: まだ不明です。

解決策: キープアライブする必要はありません

推奨読書: Vue プロジェクトは CDN を使用して最初の画面読み込みの問題を最適化します

上記は、すべての人のために私がまとめたものです。将来すべての人に役立つことを願っています。

関連記事:

クラスにメソッドを動的に追加するJavaScriptとPHPの比較

vue2 mint-uiloadmoreは、より多くの機能のためにプルダウン・リフレッシュとプルアップを実装します

JSコードは、コンピュータ構成検出機能を実装します

以上がvuejs プロジェクトのパッケージ化後の最初の画面読み込みの最適化とパッケージ化後に発生する問題の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。