VUE CLI3プロジェクトの最適化

VUE-CLI3プリフェッチ（公式ウェブサイトのコンテンツ）

<link rel="prefetch"> これは、事前に訪問する可能性があるユーザーのコンテンツを取得するために、将来の自由時間のページが読み込まれ、使用後にブラウザを伝えるために使用されるリソースのヒント、です。

デフォルトでは、VueのCLIアプリケーションはJavaScriptファイルなど、すべての非同期チャンクのために生成されます（動的な import()需要コード分割を自動的に生成することは、プリフェッチ製品を求められます）。

これらのヒントになります VUE /プリロード-のWebPACK -プラグイン@ 注入、およびにより変更、削除。chainWebpackconfig.plugin('prefetch')

例：

// vue.config.js 
module.exportsは= { 
  chainWebpack：設定 => {
     // プリフェッチプラグ取り外し 
    config.pluginsを。削除（ 'プリフェッチ' ）

    // または
    // そのオプションを変更： 
    config.pluginを（「プリフェッチ「）.TAP（オプション=> { 
      [オプション] [ 0] = .fileBlacklistオプション[0] || .fileBlacklist [] 
      オプション[ 0] .fileBlacklist.push（/ myasyncRouteは、（。）+？\。$ JS / ）
       リターンオプション
    }）
  } 
}

プリフェッチ・プラグインが無効になっているときは、インラインコメントのマニュアルのWebPACKによって事前に取得されるコードのブロックを選択することができます。

import(/* webpackPrefetch: true */ './someAsyncComponent.vue')

これは、ランタイムWebPACKの親ブロックでロードされた後、プリフェッチのリンクを挿入します。

プロンプト

プリフェッチリンクは、帯域幅を消費します。アプリケーションが大きく、非同期チャンクがたくさんある、とユーザーは主に携帯端末の帯域幅に敏感に使用している場合は、プリフェッチ・リンクをオフにして、手動で事前に取得するコードのブロックを選択する必要があるかもしれません。

基本的な最適化

遅延ロードルーティング router.jsを

CONSTホームページ=（）=>インポート（/ * webpackChunkName： "ホームページ"、webpackPrefetch：真* / 'ビュー/ホームページ/ index.vue' ）
経路：[ 
    { 
      パス： '*' 、
      名称： 'ホームページ' 、
      成分：ホームページ、      
    }、

CDNの加速

<！DOCTYPE HTML > 
< HTML LANG = "EN" スタイル= "高さ：100％;" > 
  < ヘッド> 
    < メタのcharset = "UTF-8" > 
    < メタHTTP-当量= "X-UA-互換" コンテンツ= "IE =縁" > 
    < メタ名= "ビューポート" コンテンツ= "幅=デバイス幅、初期の規模= 1.0、ユーザースケーラブル= 0" > 
    < タイトル>理财商城</ タイトル> 
    <= "<％= BASE_URL％> favicon.icoを" > 
    < リンクREL = "スタイルシート" のhref = "./ reset.css " > 
    < リンクREL ="スタイルシート" のhref = "./フォント/ font.css" > 
    
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = "./ dprFlex.js" > </ スクリプト> 
  </ ヘッド> 
  < ボディスタイル= "位置：相対;幅：100％;高さ：100％;オーバーフロー：隠された、背景：＃F1F1F2" > 
    < のdiv のid =」アプリ」 > </ divの> 
    <！ -構築用のファイルが自動挿入されます- > 
    < スクリプトタイプ= "テキスト/ javascriptの" SRC = "// cdn.jsdelivr.net/npm/eruda" > </ スクリプト> 
    
    < スクリプトSRC = "HTTPS：//cdn.bootcss .COM / VUE / 2.6.10 / vue.min.js」> </ スクリプト> 
    < スクリプトSRC = "https://cdn.bootcss.com/axios/0.19.0/axios.min.js" > </ スクリプト> 
    < スクリプトSRC = "https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js" > </ スクリプト> 
    < スクリプトSRC= "https://cdn.bootcss.com/vue-router/3.0.3/vue-router.min.js" > </ スクリプト> 
    < スクリプトSRC = "https://cdnjs.cloudflare.com/ajax/ LIBS / moment.js / 2.24.0 / moment.min.js」> </ スクリプト> 
    
    < スクリプト> 

      // eruda.init（）; 
      // するvar vConsole =新しいVConsole（）; 
    </ スクリプト> 
  </ ボディ> 
</ HTML >

vue.config.js

configureWebpack：{ 
    外観：{
       'ショック'： 'サイト' 、
       'VGX'： 'VGX' 、
       '衝撃ルータ'： 'VueRouter' 、     
       'Axios'： 'axios' 、
       '瞬間'： '瞬間' 
    } 
  }、

min.js

輸入Vueの「VUE」から
インポートアプリから「./App.vue」

からインポートルータ「./router/index」
からの輸入Vuex『vuex』
からの輸入瞬間『瞬間』