本番環境への展開環境のターンからプロジェクトの完了後のVue
一部のサードパーティパッケージが大きすぎる、JSファイルを生成するためにつながる大きすぎる、問題のあるプロジェクトかどうかを確認するためにレポートを生成することができますパックする時間です
1.レポートに使用NPM実行ビルド--reportを生成するには2つの方法があります。
2.別のパネルには、プロジェクトのUI VUE足場VUE入力UIを使用して可視化
3.本番環境での実行]ボタンをクリックして、あなたはJSのうちパッケージが2M限りの合計ファイル見ることができ、JS /チャンク-vendors.jsは、プロジェクトファイルの数に依存しています
そして、右側にあなたがして、我々はこれらの最適化のために行うことができ、木のスプレッドシートは、これらの依存関係に最大音量を追加し、要素-UIとechartsとリッチテキストエディタを見ることができます
4.開発環境と本番環境を表すmain.js 2メインdev.jsとメインprod.jsを、という名前のファイルをコピーします。
vue.config.jsすることで、デフォルト設定のWebPACKを変更し、別のパッケージを指定して、入力モードの開発のためのモデルを公開
module.exportsは= {
lintOnSave：偽、
chainWebpack：設定=> {
//发布模式
config.when（process.env.NODE_ENV === '生産'、設定=> {
config.entry（ 'アプリ'）をクリア（。 ）.add（ './ SRC /主prod.js '）
}）
//开发模式
config.when（process.env.NODE_ENV === '開発'は、config => {
config.entry（'アプリ'） .clear（）。（」./ SRC /主dev.js'）を追加
）}
}
}
サードパーティの依存関係によって導入5.デフォルトのインポート構文は、最終的にパッケージの成功で、その結果、同じパッケージファイルにマージされます、単一ファイルのサイズが大きすぎます。
この問題を解決するために、ノードの外観で設定するにはWebPACKのと外部のCDNリソースをロードします。第三者の外観に依存関係を宣言した者は、パッケージ化されることはありません。
module.exportsは= {
lintOnSave：偽、
chainWebpack：設定=> {
//发布模式
config.when（process.env.NODE_ENV === '生産'、設定=> {
config.entry（ 'アプリ'）をクリア（。 ）（」./ SRC /主prod.js '）.add
config.set（'外観{
'ヴュー'：VUE
axios： 'axios'、
lodash： '_'、
echarts 'echarts'、
nprogress ： 'NProgress'、
'VUE-クイルエディタ'： 'VueQuillEditor'
}）
。config.plugin（ 'HTML'）、タップ（引数=> {
引数[0]。isProd =真
戻り引数
}）
}）
//開発モデル
config.when（process.env.NODE_ENV === '開発'は、config => {
console.log（設定）。
config.entry（ 'アプリ'）。クリア（）を追加（ './ SRC /主dev.js '）
config.plugin（' HTML'）、タップ（引数=> {
引数[0] .isProd = FALSE
戻り引数
}）
}）
}
}
6.パブリックディレクトリにindex.htmlファイルが、これらの第三者の導入は、CDNの依存ファイル
パッケージ化されたコンパイル、再パッケージは、元の2Mから200Kファイルに出て見ることができます
7.ルートはその後インストール、遅延ロードすることができる@バベル/プラグイン構文ダイナミックインポート依存
（プラグ・変換・削除・コンソールでの役割は、本番環境ですべてにconsole.logをオフにしています）
CONST prodPlugins = []
（process.env.NODE_ENV === '生産'）であれば{
prodPlugins.push（ '変換-削除コンソール'）
}
module.exportsは= {
プリセット：[
「@ VUE / CLI-プラグインバベル/プリセット」
]、
プラグイン：[
[
'成分'、
{
LIBRARYNAME： '要素-UI'、
styleLibraryName： 'テーマチョーク'
}
]、
... prodPlugins、
'@バベル/プラグイン構文ダイナミックインポート'
]
}
プラグイン方式を使用しているVUE-ルータの公式ドキュメントを参照することができます
constのはFoo =（）=>インポート（/ * webpackChunkName： "グループ-foo" という* / './Foo.vue'）
変換ルータファイル
'VUE'からインポートヴュー 'VUE-ルータ'からインポートVueRouter '../components/Login.vue'から//輸入ログイン constのログイン=（）=>インポート（/ * webpackChunkName： "login_home_welcome" * /」.. /components/Login.vue '） //からインポートホーム' ../components/Home.vue ' ホームCONST =（）=>インポート（/ * webpackChunkName： "login_home_welcome" * /' ../components/Home.vue '） ../components/Welcome.vueから//インポートようこそ' ' のconstへようこそ=（）=>インポート（/ * webpackChunkName： "login_home_welcome" * /' ../components/Welcome.vue '） //ユーザーのインポート'../components/user/Users.vue'から のconstユーザー=（）=>インポート（/ * webpackChunkName： "Users_Rights_Roles"* / '../components/user/Users.vue'）* / '../components/user/Users.vue '） //' ../components/power/Right.vue'からインポートする権利 constの権利=（）=>インポート（/ * webpackChunkName： "Users_Rights_Roles" * / '../components/power/Right.vue '） //インポートの役割' ../components/power/Roles.vue'から constの役割=（）=>インポート（/ * webpackChunkName： "Users_Rights_Roles" * / '../components/power/Roles.vue '） //インポートケイト' ../components/goods/Cate.vue'から のconstケイト=（ ）=>インポート（/ * webpackChunkName： "Cate_Params" * / '../components/goods/Cate.vue '） ' ../components/goods/Params.vue'から//インポートのparams のconstのparams =（）= >インポート（/ * webpackChunkName： "Cate_Params" * / '../components/goods/Params.vue '） ' ../components/goods/List.vue'から//インポートGoodsList constのGoodsList =（）=>インポート（/ * webpackChunkName： "GoodsList_Add" * / '../components/goods/List.vue'） //からインポート追加'../components/goods/Add.vue' constの追加=（）=>インポート（/ * webpackChunkName： "GoodsList_Add" * / '../components/goods/Add.vue'） // '../components/order/Order.vue'からインポート注文 ：オーダーCONST =（）=>インポート（ "Order_Report" * / '../components/order/Order.vue' / * webpackChunkName） //インポートレポート'../components/report/Report.vue'から 報告書=（定数）=>インポート（： "Order_Report" * / '../components/report/Report.vue' / * webpackChunkName）