VUEプロジェクト開発の最適化

需要アセンブリ1は、UIを導入し、

例えばelementUIは、グローバルmain.jsに直接すべてのコンポーネントを導入するのではなく、ドキュメントのelementuiに従って、オンデマンドの導入

プロジェクトのコンポーネント

図2は、非同期ルーティングコンポーネントを導入します

使用

{ 

　　パス： '/インデックス' 、

　　名称： 'インデックス' 、

       成分：解決 => require.ensure（[]、（）=>解決（（ '@ /部品/インデックス'））,, 'indexChunk'が必要）

}

VUEは梱包後、コメントは同じJSファイルにパックされるようにwebpackChunkName、遅延ロードをルーティング//非同期に来ます

成分：解決=>必要とする（[ '@ /部品/インデックス']、解決）

ES提案インポート（）

コンポーネント：（）=>インポート（/ * webpackChunkName： "indexChunk" * / '@ /コンポーネント/ index.vue'」

WebPACKの提供require.ensure（）

解決=> require.ensure（[]、（）=>解決（必要（ '@ /部品/インデックス'））,, 'indexChunk'）

遅延ロードのルーティング、動的ルーティングは、値を渡すことができませんでした

総容量で別々に包装されているが、このコードは大きくなる（同じチャンクがJSファイルにパッケージ化される）が、リソースを減少させる、自動的にサイトをロードチャンクをロードするために解析のindexChunkチャンクと呼ばれる構成要素に分類します速度を向上させるように、要求します。

 解決=>必要とする（[ "@ /コンポーネント/インデックス"]、解決）

3ソースコードの最適化

あなたが遅延ロード、SSRサーバーレンダリングを使用することができるときVUEコンポーネント、需要ローディング画像、写真などを分解し、時計のデータを削減する、項目に一意のキー値を設定します。

4つのCSSのsourceMap

sourceMap：process.env.NODE_ENV === "生産"？偽：真、

スタイルマップを構築するかどうか//、偽のビルド速度が向上します