Cách ngăn chặn nút hết bộ nhớ khi đóng gói js cho React Native

Question

Khi đóng gói js cho React Native bằng ClojureScript, tôi nhận được lỗi sau. Dường như nút hết bộ nhớ khi gói gói javascript. Điều này có thể xảy ra nhiều hơn khi sử dụng ClojureScript vì các tệp js kết quả thường lớn hơn js vanilla.

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 

<--- Last few GCs ---> 

    152689 ms: Mark-sweep 1369.3 (1434.8) -> 1362.8 (1434.8) MB, 2794.5/0 ms [allocation failure] [GC in old space requested]. 
    155498 ms: Mark-sweep 1362.8 (1434.8) -> 1362.9 (1434.8) MB, 2808.4/0 ms [allocation failure] [GC in old space requested]. 
    158508 ms: Mark-sweep 1362.9 (1434.8) -> 1362.8 (1434.8) MB, 3010.8/0 ms [last resort gc]. 
    161189 ms: Mark-sweep 1362.8 (1434.8) -> 1362.8 (1434.8) MB, 2680.5/0 ms [last resort gc]. 


<--- JS stacktrace ---> 

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

Security context: 0xd4b9fdc9e59 <JS Object> 
    1: visitQueue [/Users/myproj/node_modules/babel-traverse/lib/context.js:~130] [pc=0x3e89a3f7bd28] (this=0x24a5ec659101 <a TraversalContext with map 0x157972399611>,queue=0x24a5ec659149 <JS Array[1]>) 
    2: node [/Users/myproj/node_modules/babel-traverse/lib/index.js:~150] [pc=0x3e89a3e4f23a] (this=0x387a6b7f4301 <JS Function traverse (SharedFunction... 

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory 

<--- Last few GCs ---> 

    238422 ms: Mark-sweep 1364.8 (1434.8) -> 1364.8 (1434.8) MB, 3377.7/0 ms [allocation failure] [GC in old space requested]. 
    241834 ms: Mark-sweep 1364.8 (1434.8) -> 1364.8 (1434.8) MB, 3412.3/0 ms [allocation failure] [GC in old space requested]. 
    245313 ms: Mark-sweep 1364.8 (1434.8) -> 1364.8 (1434.8) MB, 3478.7/0 ms [last resort gc]. 
    248639 ms: Mark-sweep 1364.8 (1434.8) -> 1364.8 (1434.8) MB, 3326.4/0 ms [last resort gc]. 


<--- JS stacktrace ---> 

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

Security context: 0x266dabec9e59 <JS Object> 
    1: new constructor(aka NodePath) [/Users/myproj/node_modules/babel-traverse/lib/path/index.js:~61] [pc=0x108980041705] (this=0x1cedf9a7ef69 <a NodePath with map 0x3182f379cf21>,hub=0x266dabe04189 <undefined>,parent=0x3d43337ab49 <a Node with map 0x3182f3798489>) 
    3: get [/Users/myproj/node_modules/babel-traverse/lib/path/index.js:~87] [pc=0x10898... 

[node-haste] Encountered an error while persisting cache: 
> Error: Uncaught error in the transformer worker: /Users/myproj/node_modules/react-native/packager/transformer.js 
>  at _transform.then.catch.error (/Users/myproj/node_modules/react-native/packager/react-packager/src/JSTransformer/index.js:99:31) 
>  at tryCallOne (/Users/myproj/node_modules/promise/lib/core.js:37:12) 
>  at /Users/myproj/node_modules/promise/lib/core.js:123:15 
>  at flush (/Users/myproj/node_modules/asap/raw.js:50:29) 
>  at _combinedTickCallback (internal/process/next_tick.js:67:7) 
>  at process._tickCallback (internal/process/next_tick.js:98:9) 
/Users/myproj/node_modules/promise/lib/done.js:10 
     throw err; 
    ^

Error: Uncaught error in the transformer worker: /Users/myproj/node_modules/react-native/packager/transformer.js 
    at _transform.then.catch.error (/Users/myproj/node_modules/react-native/packager/react-packager/src/JSTransformer/index.js:99:31) 
    at tryCallOne (/Users/myproj/node_modules/promise/lib/core.js:37:12) 
    at /Users/myproj/node_modules/promise/lib/core.js:123:15 
    at flush (/Users/myproj/node_modules/asap/raw.js:50:29) 
    at _combinedTickCallback (internal/process/next_tick.js:67:7) 
    at process._tickCallback (internal/process/next_tick.js:98:9) 
Command /bin/sh failed with exit code 1 

Answer 1

Các giải pháp dành cho iOS để chỉnh sửa các tập tin sau đây: ios/YourProjectName.xcodeproj/project.pbxproj và thay đổi dòng sau (~ 600)

shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh"; 

để

shellScript = "export NODE_BINARY='node --max_old_space_size=4092'\n../node_modules/react-native/packager/react-native-xcode.sh"; 

Answer 2

workaround khác là để vô hiệu hóa tối ưu hóa bởi thiết lập --dev true để xây dựng sản phẩm. Điều này có những hạn chế về mặt hiệu suất, nhưng theo kinh nghiệm của tôi, chúng được chấp nhận. Chế độ Dev cũng cho phép một số kiểm tra thời gian chạy. Bạn có thể vô hiệu hóa chúng bằng cách thay đổi DEV liên tục ở phía trên cùng của gói đầu ra, như vậy: cách

#!/usr/bin/env python 

# Patch jsbundle to set __DEV__ to false 

import sys, re 

print(re.sub(r'__DEV__\s*=\s*true;', "__DEV__=false;", 
     sys.stdin.read())) 

Answer 3

tôi đã tìm thấy để tạo Signed APK trong dự án tái sinh. Đối với điều này, chúng tôi phải chỉnh sửa tệp trong node_modules/react-native/react.gradle

Thay đổi hàng thứ 84 trong tệp này. Từ

commandLine(*nodeExecutableAndArgs, "node_modules/react-native/local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}", 
    "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir, *extraPackagerArgs) 

Để này

commandLine(*nodeExecutableAndArgs, "--max-old-space-size=4096", "node_modules/react-native/local-cli/cli.js", "bundle", "--platform", "android", "--dev", "${devEnabled}", 
    "--reset-cache", "--entry-file", entryFile, "--bundle-output", jsBundleFile, "--assets-dest", resourcesDir, *extraPackagerArgs) 

Để tạo sản xuất xây dựng bạn phải sử dụng

lein prod-build 

Sau khi biên dịch của ClojureScript sử dụng lệnh này:

cd android && ./gradlew assembleRelease 

Các APK được tạo có thể được tìm thấy dưới android/app/build/outputs/apk/app-release.apk và sẵn sàng để được phân phối.

Answer 4

Đối với Android, điều này cũng có thể được thiết lập trong android/app/build.gradle bằng cách thêm:

project.ext.react = [ 
    // override which node gets called and with what additional arguments 
    nodeExecutableAndArgs: ["node", "--max-old-space-size=4096"] 
] 

lưu ý rằng điều này phải được bổ sung trên các dòng sau:

apply from: "../../node_modules/react-native/react.gradle"