Vue: ๋นŒ๋“œ ์ค‘ ์น˜๋ช…์ ์ธ ์˜ค๋ฅ˜: ํž™ ์ œํ•œ ๊ทผ์ฒ˜์—์„œ ๋น„ํšจ์œจ์ ์ธ ๋งˆํฌ ์••์ถ• ํ• ๋‹น์— ์‹คํŒจํ–ˆ์Šต๋‹ˆ๋‹ค.

์— ๋งŒ๋“  2019๋…„ 06์›” 13์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vuejs/vue

๋ฒ„์ „

2.6.10

์žฌ์ƒ์‚ฐ ๋งํฌ

https://github.com/greenpdx/opencv-vue

์žฌํ˜„ ๋‹จ๊ณ„

npm i opencv.js

main.js ์— ๋ช‡ ์ค„ ์ถ”๊ฐ€

import * as cv from 'opencv.js'
Vue.prototype.$cv = cv

๋นŒ๋“œ๋ฅผ ์‹œ๋„ํ•˜๊ณ  npm run build

๋ฌด์—‡์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๊นŒ?

Building for production...

 DONE  Compiled successfully

์‹ค์ œ๋กœ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

โ ผ  Building for production...

<--- Last few GCs --->

[12278:0x55a446ded250]    48764 ms: Mark-sweep 1336.7 (1441.2) -> 1321.7 (1441.2) MB, 875.5 / 0.0 ms  (average mu = 0.184, current mu = 0.078) allocation failure scavenge might not succeed
[12278:0x55a446ded250]    49725 ms: Mark-sweep 1337.0 (1441.2) -> 1322.0 (1441.7) MB, 892.9 / 0.0 ms  (average mu = 0.130, current mu = 0.071) allocation failure scavenge might not succeed


<--- JS stacktrace --->

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

    0: ExitFrame [pc: 0x13e4d8c4fc5d]
Security context: 0x266f3d81d9f1 <JSObject>
    1: Sn(aka Sn) [0x169ed77ba971] [.../test0/node_modules/terser/dist/bundle.min.js:~1] [pc=0x13e4d93a6153](this=0x1ec95ca825b1 <undefined>,0x1ec95ca825b1 <undefined>)
    2: /* anonymous */(aka /* anonymous */) [0xfa94c311551] [.../test0/node_modules/terser/dist/bundle.min.js:~1] [pc=0x13e4d93c1...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory
 1: 0x55a445721761 node::Abort() [/usr/bin/node]
 2: 0x55a445723255 node::OnFatalError(char const*, char const*) [/usr/bin/node]
 3: 0x55a4458c9002 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
 4: 0x55a4458c925b v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/usr/bin/node]
 5: 0x55a445c60573  [/usr/bin/node]
 6: 0x55a445c606b4  [/usr/bin/node]
 7: 0x55a445c70656 v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/usr/bin/node]
 8: 0x55a445c70ffe v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/usr/bin/node]
 9: 0x55a445c73a1d v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/bin/node]
10: 0x55a445c73a72 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationSpace, v8::internal::AllocationAlignment) [/usr/bin/node]
11: 0x55a445c41418 v8::internal::Factory::AllocateRawArray(int, v8::internal::PretenureFlag) [/usr/bin/node]
12: 0x55a445c41934 v8::internal::Factory::NewFixedArrayWithFiller(v8::internal::Heap::RootListIndex, int, v8::internal::Object*, v8::internal::PretenureFlag) [/usr/bin/node]
13: 0x55a445c41a00 v8::internal::Handle<v8::internal::FixedArray> v8::internal::Factory::NewFixedArrayWithMap<v8::internal::FixedArray>(v8::internal::Heap::RootListIndex, int, v8::internal::PretenureFlag) [/usr/bin/node]
14: 0x55a445d7344c v8::internal::HashTable<v8::internal::NameDictionary, v8::internal::NameDictionaryShape>::New(v8::internal::Isolate*, int, v8::internal::PretenureFlag, v8::internal::MinimumCapacity) [/usr/bin/node]
15: 0x55a445d9539f v8::internal::BaseNameDictionary<v8::internal::NameDictionary, v8::internal::NameDictionaryShape>::EnsureCapacity(v8::internal::Isolate*, v8::internal::Handle<v8::internal::NameDictionary>, int) [/usr/bin/node]
16: 0x55a445d95409 v8::internal::Dictionary<v8::internal::NameDictionary, v8::internal::NameDictionaryShape>::Add(v8::internal::Isolate*, v8::internal::Handle<v8::internal::NameDictionary>, v8::internal::Handle<v8::internal::Name>, v8::internal::Handle<v8::internal::Object>, v8::internal::PropertyDetails, int*) [/usr/bin/node]
17: 0x55a445ed2fc4 v8::internal::Runtime_AddDictionaryProperty(int, v8::internal::Object**, v8::internal::Isolate*) [/usr/bin/node]
18: 0x13e4d8c4fc5d 
โ ฆ  Building for production...^CโŽ

์ž‘์„ฑ์ž ๋ ˆํฌ ์—์„œ ๋‹ต์ด

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

๏ฟผ์™„๋ฃŒ

ํ‚ค๊ฐ€ ์žˆ๋Š” ํ•œ ์ค„

NODE_OPTIONS=--max_old_space_size=4096 npm run build

๋ชจ๋“  3 ๋Œ“๊ธ€

๋ฌธ์ œ๋Š” ์—ฌ๊ธฐ๊ฐ€ ์•„๋‹Œ ํ•ด๋‹น ๋ฆฌํฌ์ง€ํ† ๋ฆฌ์—์„œ ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค. ๊ฑฐ๊ธฐ์—์„œ ๋‹ต๋ณ€์„ ์–ป์ง€ ๋ชปํ–ˆ๊ธฐ ๋•Œ๋ฌธ์— ์—ฌ๊ธฐ์—์„œ ๋ฌธ์ œ๋ฅผ ์—ด โ€‹โ€‹์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค...
๋ฌธ์ œ๊ฐ€ ๊ตฌ์ฒด์ ์œผ๋กœ ์–ด๋””์—์„œ ๋ฐœ์ƒํ•˜๋Š”์ง€ ์ฐพ๊ฑฐ๋‚˜ ์†”๋ฃจ์…˜์„ ๋” ์ž˜ ์ฐพ๋Š” ๊ฒฝ์šฐ ์š”์•ฝ๋œ ์žฌํ˜„(opencv ์—†์Œ)์œผ๋กœ ์ƒˆ ๋ฌธ์ œ๋ฅผ ์—ฌ์‹ญ์‹œ์˜ค.

@posva
๋ฌธ์ œ๋Š” ํŒจํ‚ค์ง€์˜ ํฌ๊ธฐ๊ฐ€ ํฌ๊ธฐ ๋•Œ๋ฌธ์— ๋ฉ”๋ชจ๋ฆฌ ์ œํ•œ์„ ๋Š˜๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์„ ๋” ์ž˜ ์•Œ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.


์ˆ˜๋™์œผ๋กœ ๋Š˜๋ฆฌ์ง€ ์•Š์œผ๋ฉด V8์˜ ๋ฉ”๋ชจ๋ฆฌ ์‚ฌ์šฉ๋Ÿ‰์— ๋Œ€ํ•œ ์—„๊ฒฉํ•œ ํ‘œ์ค€ ์ œํ•œ์ด ์•ฝ 1.7GB์ž…๋‹ˆ๋‹ค.

node --max-old-space-size=4096 yourFile.js

vue-cli์—์„œ ์–ด๋–ป๊ฒŒ ํ•˜๋‚˜์š”?

๏ฟผ์™„๋ฃŒ

ํ‚ค๊ฐ€ ์žˆ๋Š” ํ•œ ์ค„

NODE_OPTIONS=--max_old_space_size=4096 npm run build

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰