React前端项目build时出现内存溢出问题

1、安装依赖: npm install ,会自动生成 node_modules 文件夹,里面是所有的依赖

2、启动服务:npm start

3、构建:npm run build (发布到私服才需要构建,如果只是本地测试不需要构建)

如果出现下面的错误:

<--- Last few GCs --->

[9840:000002815F439EE0]    21326 ms: Scavenge 1384.5 (1422.0) -> 1383.9 (1423.0) MB, 3.3 / 0.0 ms  (average mu = 0.147, current mu = 0.043) allocation failure
[9840:000002815F439EE0]    22546 ms: Mark-sweep 1384.7 (1423.0) -> 1383.7 (1422.0) MB, 1215.1 / 0.0 ms  (average mu = 0.074, current mu = 0.022) allocation failure scavenge m
ight not succeed
[9840:000002815F439EE0]    22553 ms: Scavenge 1384.6 (1422.0) -> 1384.0 (1422.5) MB, 3.6 / 0.0 ms  (average mu = 0.074, current mu = 0.022) allocation failure


<--- JS stacktrace --->

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

    0: ExitFrame [pc: 00000118DDC50481]
Security context: 0x03de2c49d9d1 
    1: _walk [0000024C77FD8BD9] [0x016cb72025b1 :~500] [pc=00000118DE084AA9](this=0x0113722ea981 ,0x0322964bcc49 )
    2: /* anonymous */ [0000025B728BBD39] [0x016cb72025b1 :~733] [pc=00000118DE08755F](this=0x0113722ea429 

并且自动生成下面的文件:

React前端项目build时出现内存溢出问题_第1张图片

说明是内存溢出了,此时执行 npm run fix-memory-limit ,但是可能还会报相同的错误,可能是因为项目太大,build时占用的内存已经超过build默认的内存大小。

执行:set NODE_OPTIONS=--max_old_space_size=8096 ,设置 build 的打包内存大小,然后再 npm run build,就能构建成功了。

React前端项目build时出现内存溢出问题_第2张图片

 构建成功之后会生成一个 build 文件夹,里面是构建之后的文件

React前端项目build时出现内存溢出问题_第3张图片

此时说明构建成功。

虽然构建成功,但是在构建过程中可能会出现下面的错误日志:

[ExtractCssAssetsWebpackPlugin] Warning: Asset download failed http://at.alicdn.com/t/font_455447_4gwixc8l0tb21emi.woff2
    

  NoSuchKey
  The specified key does not exist.
  627A10439DDDB031364FE84F
  at.alicdn.com
  t/font_455447_4gwixc8l0tb21emi.woff2

如果构建成功并且生成了 build 文件夹,并且 build 文件夹里有文件,那么就可以忽略这个错误,它表示有一个图标字符没有下载成功,但是不影响项目的启动。

4、发布到私服:双击 deploy

React前端项目build时出现内存溢出问题_第4张图片

你可能感兴趣的