Vueの大規模プロジェクトのホットアップデートの最適化

最適化の目的

プロジェクトのルーティングとコンポーネントファイルが増えると、hot reload低速の開発やreact nativeデバイスのデバッグでの戦いが、開発効率に深刻な影響を及ぼしました。

---

コンポーネントの定義improtとrequireメソッド

ルーティングrouterフォルダ内
新規_import_development.js

module.exports = file => require('@/views/' + file + '.vue').default

新着 _import_production.js

module.exports = file => () => import('@/views/' + file + '.vue')

routerエントリファイルを変更するindex.js

+ const _import = require('./_import_' + process.env.NODE_ENV);

export const routers = [
    {
        path: '/',
        name: 'login',
        meta: { 
            title: '登录'
        },
        + component: _import('login')
        - component: import(''@/views/login.vue')
    },
]

または直接の定義router/index.jsで

cosnt importComponents = process.env.NODE_ENV ==  "development" ? file => require('@/views/' + file + '.vue').default :  file => import('@/views/' + file + '.vue');

export const routers = [
    {
        path: '/',
        name: 'login',
        meta: { 
            title: '登录'
        },
        + component: importComponents ('login')
        - component: import(''@/views/login.vue')
    },
]

次に、ターミナルをオフにして、yarn start結果を再度確認しました。

作成者が変更された後、ホットアップデートは約4〜6秒です。

vue require().default使用法についてはhttps://www.jianshu.com/p/0cc58bcbd24c
import 封装参照リンクhttps://juejin.im/post/5b3e053df265da0f774a8e7cを参照できます

---

プラグインを使用する dynamic-import-node

にnpm依存関係を追加します--save-dev。

npm install babel-plugin-dynamic-import-node --save-dev

vue-cli-3ビルドされたvueアプリを使用babel.config.jsすると、プラグインファイルを追加できます

/** @format */

  "env": {
      "development": {
        "plugins": ["dynamic-import-node"]
      }
 }

では.babelrc、追加ファイル（官方推荐）

{
  "plugins": ["dynamic-import-node"]
}

オプション noInterop

"plugins": [
    ["dynamic-import-node", { "noInterop": true }]
  ]

true取引所がrequire電話をかけない場合。それを避けることは有用ですrequire（'module'）。commonjsモジュールのデフォルト。非同期
による開発環境を同期に変換して熱更新率を上げ、本番環境は引き続きメカニズムを使用します。babelimport()require()webpackimport

babel-plugin-dynamic-import-node npmリンクhttps://www.npmjs.com/package/babel-plugin-dynamic-import-node

vue-cli3メモリオーバーフロー

ホットアップデートで突然メモリオーバーフローの問題が発生する可能性がある場合、その理由は、コンパイルwebpack時に、V8エンジンノードのデフォルトのメモリサイズ制限（64ビットシステム：1.4 GB、32ビットシステム：0.7 GB）を超えると、大規模なプロジェクトがメモリを消費するためです。 、メモリオーバーフローエラーが発生します。

<--- Last few GCs --->

[13872:000001BAF69758E0]   606058 ms: Mark-sweep 1227.9 (1294.4) -> 1225.3 (1292.1) MB, 387.1 / 0.1 ms  (average mu = 0.936, current mu = 0.000) last resort GC in old space requested
[13872:000001BAF69758E0]   606389 ms: Mark-sweep 1225.3 (1292.1) -> 1225.3 (1291.6) MB, 330.6 / 0.0 ms  (average mu = 0.881, current mu = 0.000) last resort GC in old space requested


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0000011C9175C5C1]
Security context: 0x01546879e6e9 <JSObject>
    1: byteLength(aka byteLength) [00000079857F9241] [buffer.js:531] [bytecode=00000160110414F1 offset=204](this=0x02bf2c6826f1 <undefined>,string=0x032765d66511 <Very long string[84025566]>,encoding=0x0154687be2e1 <String[4]: utf8>)
    2: arguments adaptor frame: 3->2
    3: fromString(aka fromString) [0000018FF1D13251] [buffer.js:342] [bytecode=00000160...

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
 1: 00007FF7B0E1C6AA v8::internal::GCIdleTimeHandler::GCIdleTimeHandler+4506
 2: 00007FF7B0DF7416 node::MakeCallback+4534
 3: 00007FF7B0DF7D90 node_module_register+2032
 4: 00007FF7B111189E v8::internal::FatalProcessOutOfMemory+846
 5: 00007FF7B11117CF v8::internal::FatalProcessOutOfMemory+639
 6: 00007FF7B12F7F94 v8::internal::Heap::MaxHeapGrowingFactor+9620
 7: 00007FF7B12F645B v8::internal::Heap::MaxHeapGrowingFactor+2651
 8: 00007FF7B14202BB v8::internal::Factory::AllocateRawWithImmortalMap+59
 9: 00007FF7B1422D6D v8::internal::Factory::NewRawTwoByteString+77
10: 00007FF7B116DDA8 v8::internal::Smi::SmiPrint+536
11: 00007FF7B1104EAB v8::internal::StringHasher::UpdateIndex+219
12: 00007FF7B112A2C6 v8::String::Utf8Length+22
13: 00007FF7B0DE07AC node::Buffer::New+4332
14: 00007FF7B1324382 std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::ZoneAllocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Umove+79442
15: 00007FF7B132580D std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::ZoneAllocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Umove+84701
16: 00007FF7B1324866 std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::ZoneAllocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Umove+80694
17: 00007FF7B132474B std::vector<v8::internal::compiler::MoveOperands * __ptr64,v8::internal::ZoneAllocator<v8::internal::compiler::MoveOperands * __ptr64> >::_Umove+80411
18: 0000011C9175C5C1

ここで使用されているように、制限の解除メモリプラグインはincrease-memory-limit、npmリンクhttps://www.npmjs.com/package/increase-memory-limitを添付します。

使用する increase-memory-limit

指定されたバージョンをインストールしincrease-memory-limit、cross-envするために--save頼っています

npm install --save [email protected] [email protected]

"dependencies": {
    "increase-memory-limit": "^1.0.3",
  },

指定された最大メモリの制限にコマンドをpackage.json追加します。scriptLIMIT

  "scripts": {
    "adjust-mermory-limit": "cross-env LIMIT=2048 increase-memory-limit"
  },
  
	

スクリプトを実行する

npm run adjust-mermory-limit

プロジェクトを再起動して、メモリオーバーフローの問題を確認します。