Vue 2を解決する.xプロジェクトパッケージ後vendorとappファイルが大きすぎる問題
2799 ワード
背景最近やっているwebプロジェクト(フロントエンドはVue+Vue-routerに基づいている)では、トップ画面のロードが遅いという問題が発生しました.30秒に及ぶ待ち時間です.このようなロード時間は絶対に耐えられません.調査の結果、原因は2:1であることが分かった.npm run buidコマンドのパッケージングを実行すると、生成されるvendor.xxx.jsファイルが大きすぎます.2.サーバ帯域幅が1 Mbpsしかないため、リソースのダウンロードが遅い.
科学的なインターネットを通じて、多くの解決方法を見つけたが、ほとんどがばらばらで、振り回されたり穴を踏んだりして、以下の方法と手順をまとめ、必要な学生を助けることができることを望んでいる.一、トップスクリーン依存の静的資源をindexに変更する.htmlはCDNのリソースを導入します.1.サードパーティ製のパッケージが多い場合は、npm run build--reportコマンドでパッケージ化して詳細なレポートを作成し、レポートに基づいてwebpackパッケージを使用しないリソースを決定する必要があります.2.element-uiを例にindex.htmlファイルにCDNリソースを導入するには、次の手順に従います.
サードパーティ CDNリソースを するメリットは、プロジェクトが するサーバに する の とトラフィックの を できることです.また、 のサイトが じリソースを している 、ブラウザはデフォルトでこれらのリソースをキャッシュし、 リクエスト にキャッシュを し、ロード を に させます.もちろん もありますが、 えばいくつかのCNDの さはプロジェクトの さや を き、どのように し、 するかは が なシーンに づいて する がありますが、ここでは しく しません.
3. にプロジェクトbuild/webpack.base.jsファイルの に、 の を します.
ここでexternalsフィールド は、jsファイルを するためにwebpack のモジュールをパッケージ する がないことを すものであり、 はプロジェクト のimportのモジュールであり、 は するグローバル である.この では、element-uiはプロジェクト のimportのモジュール であり、ELEMENTはCDNによって されたelement-uiコンポーネントライブラリから するグローバル であり、プロジェクトではimportを してelement-uiをインポートします.
:CDNによって されたリソースから したグローバル が からない は、ソースコードでエクスポートされたキーワードを できます.ブラウザにunpkgを .com/[email protected]/lib/index.js、 の で のコードを ました.
このjsファイルをindexに することが かる.html 、Windowsオブジェクトにグローバル ELEMENTがマウントされます.
、Vue-routerをリロード に
なロードルーティングを し、リソースをオンデマンドでロードし、 コードをアップロードします.
科学的なインターネットを通じて、多くの解決方法を見つけたが、ほとんどがばらばらで、振り回されたり穴を踏んだりして、以下の方法と手順をまとめ、必要な学生を助けることができることを望んでいる.一、トップスクリーン依存の静的資源をindexに変更する.htmlはCDNのリソースを導入します.1.サードパーティ製のパッケージが多い場合は、npm run build--reportコマンドでパッケージ化して詳細なレポートを作成し、レポートに基づいてwebpackパッケージを使用しないリソースを決定する必要があります.2.element-uiを例にindex.htmlファイルにCDNリソースを導入するには、次の手順に従います.
サードパーティ CDNリソースを するメリットは、プロジェクトが するサーバに する の とトラフィックの を できることです.また、 のサイトが じリソースを している 、ブラウザはデフォルトでこれらのリソースをキャッシュし、 リクエスト にキャッシュを し、ロード を に させます.もちろん もありますが、 えばいくつかのCNDの さはプロジェクトの さや を き、どのように し、 するかは が なシーンに づいて する がありますが、ここでは しく しません.
3. にプロジェクトbuild/webpack.base.jsファイルの に、 の を します.
externals:{
'element-ui':'ELEMENT'
}ここでexternalsフィールド は、jsファイルを するためにwebpack のモジュールをパッケージ する がないことを すものであり、 はプロジェクト のimportのモジュールであり、 は するグローバル である.この では、element-uiはプロジェクト のimportのモジュール であり、ELEMENTはCDNによって されたelement-uiコンポーネントライブラリから するグローバル であり、プロジェクトではimportを してelement-uiをインポートします.
import ElementUI from 'element-ui':CDNによって されたリソースから したグローバル が からない は、ソースコードでエクスポートされたキーワードを できます.ブラウザにunpkgを .com/[email protected]/lib/index.js、 の で のコードを ました.
object"==typeof exports&&"object"==typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define("ELEMENT",\["vue"\],t):"object"==typeof exports?exports.ELEMENT=t(require("vue")):e.ELEMENT=t(e.Vue)このjsファイルをindexに することが かる.html 、Windowsオブジェクトにグローバル ELEMENTがマウントされます.
、Vue-routerをリロード に
なロードルーティングを し、リソースをオンデマンドでロードし、 コードをアップロードします.
{
path: '/console',
name: 'console',
meta: {},
component: resolve => require(['@/pages/console/console'], resolve),
children: [
{
path: 'home',
name: 'home',
meta: { location: ' ' },
component: resolve => require(['@/pages/home/home'], resolve)
},
{
path: 'user',
name: 'user',
meta: { location: ' ' },
component: resolve => require(['@/pages/user'], resolve)
},
{
path: 'dashboard',
name: 'dashboard',
meta: { location: ' ' },
component: resolve => require(['@/pages/dashboard'], resolve)
},
resourceRoute,
cdRoute,
ciRoute,
appRoute,
opstoolsRoute
]
}