Vue 大型项目热更新优化 |
您所在的位置：网站首页 › vue设置热更新 › Vue 大型项目热更新优化 |
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 的用法可以参考 www.jianshu.com/p/0cc58bcbd… import 封装 参考链接 juejin.cn/post/684490… 使用插件 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 链接 www.npmjs.com/package/bab… vue-cli 3 内存溢出在热更新的时候可能会碰到内存突然溢出的问题，原因是因为在编译大型项目 webpack 占用内存如果超出了V8引擎对Node默认的内存限制大小时，(64位系统：1.4 GB，32位系统：0.7 GB)，就会产生内存溢出的错误。 [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 stack trace ========================================= 0: ExitFrame [pc: 0000011C9175C5C1] Security context: 0x01546879e6e9 1: byteLength(aka byteLength) [00000079857F9241] [buffer.js:531] [bytecode=00000160110414F1 offset=204](this=0x02bf2c6826f1 ,string=0x032765d66511 ,encoding=0x0154687be2e1 ) 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::_Umove+79442 15: 00007FF7B132580D std::vector::_Umove+84701 16: 00007FF7B1324866 std::vector::_Umove+80694 17: 00007FF7B132474B std::vector::_Umove+80411 18: 0000011C9175C5C1在这里使用一个解除限制内存的插件 increase-memory-limit ,附上 npm 链接 www.npmjs.com/package/inc… 。 使用 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再次启动项目验证内存溢出问题。 |
【本文地址】
今日新闻 |
推荐新闻 |