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 - 6s 左右。

关于 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 app 可以在 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 模块上。
开发环境通过 babel 将异步 import() 转化为同步 require() 来增加热更新速度，生产环境继续使用 webpack 的import 机制。

babel-plugin-dynamic-import-node npm 链接 https://www.npmjs.com/package/babel-plugin-dynamic-import-node

vue-cli 3 内存溢出

在热更新的时候可能会碰到内存突然溢出的问题，原因是因为在编译大型项目 webpack 占用内存如果超出了V8引擎对Node默认的内存限制大小时，(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 添加一个 script 指令 , LIMIT 为指定的最大限制内存。

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

运行脚本

npm run adjust-mermory-limit

在这里插入图片描述
再次启动项目验证内存溢出问题。