梱包最適化のVue-CLI 2.Xバージョン説明

パッケージングの最適化は、私は原則はコード圧縮だと思う、論文の小さなスクラップに大きなファイルを分割します。より良く壊れました。技術が限られているが、最適化されたパッケージは、小規模なプロジェクトのための5つの領域を最適化されていますので、あなたはそれを持っている必要があります。

1.非同期ローディング経路。

CONSTログインをルーティングすることによって行わ遅延読み込みは、=(解決)=>([ 'ビュー/ログイン']、解決)モードを必要とします。このようにパッケージのconst指数=()=>インポート(「@ /ビュー/インデックス」)は、ボリュームを減少させたが、それは非常に明白ではないようですが、


2. .MAPファイルを削除します。

Vueのプロジェクトパッケージの後、実際には、この文書では、主にエラーを追跡するために使用され、文書の多くは.MAPの終わりだったがあるでしょう。あなたが実行している問題がある場合は、コードの最初の数行に問題があることを示唆することができます。本番環境では、これは必須ではないことは明らかです。

だから我々は、不要なファイルを減らすことができるようにproductionSourceMap :.真、falseに真を見つけるために、index.js configフォルダを見つけます。

 

3.サードパーティが抽出ライブラリとバージョン番号をロックします。

元のプロジェクトJQでは、我々はすべてのプロジェクトは、CDNの方法でプロジェクトに導入されたいくつかのリソースライブラリによって最適化することができることを知っています。例のjqury、ブートストラップ、等のため。もちろんVueのプロジェクトは、このような方法で最適化することができます。
webpack.base.conf.jsファイルを持っているビルドフォルダを検索します。以下のエントリでは、フィールドの外観を追加することができます:{ 'VUE': ' Vueの'、 '要素-UI': 'ELEMENT'、 'VUE-ルータ': 'VueRouter'、 'axios': 'axiosを'}、 その後、 CDNアドレスの対応するライブラリと内側に、プロジェクトのルートディレクトリにindex.htmlファイルを検索します:

  <スクリプトSRC = "https://unpkg.com/[email protected]/dist/vue.js"> </ SCRIPT>
  <スクリプトSRC = "https://unpkg.com/[email protected]/dist/axios.min.js"> </ SCRIPT>
  <スクリプトSRC = "https://unpkg.com/[email protected]/dist/vue-router.js"> </ SCRIPT>
  <リンクのrel = "スタイルシート" のhref = "https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <スクリプトSRC = "https://unpkg.com/element-ui/lib/index.js"> </ SCRIPT>
 
4. CSSMのモジュラー。CSSのallChunksフィールドを設定webpack.prod.conf.jsが偽となり、このステップは、すべてのCSSファイルを分割することです。
画像WebPACKのローダを使用して大きな画像圧縮、。それについて自分自身のBaiduの特定の使用。多くのがあります。
 

おすすめ

転載: www.cnblogs.com/fourthCities/p/10949223.html