A newly written React project took a long time to load after it was deployed in production. Open Chrome DevTools and find 1.4m static resources.

Use React Loadable. It takes time to verify that Nginx is enabled with Gzip.

  1. innginx.confgIn theserverAdd: 
    gzip on;
gzip_buffers 32 4k;
gzip_comp_level 6;
gzip_min_length 200;
gzip_types text/css text/xml application/javascript;
gzip_vary on;
Copy the code
  2. exitnginx.confPerform: 
    nginx -s reload
Copy the code

Refresh the page and you can see that the network transport in DevTools is much smaller (1.4MB => 280kB).