After the project is packaged, the package command ng build –prod

The file main.xxx.js is a whopping 5.52 MB in size when packaged. Test the first access to this main file loading speed is about 4s, the fast network speed may be 2,3s, slow network speed is very slow

The solution does a few things without changing the WebPack configuration

  1. Make sure all modules are lazily loaded

  1. Delete useless dependencies

  1. One of the most useful solutions, nginx configuration gzip

Nginx configuration file

server {
    listen       443ssl; server_name asgardcq1.cn.hpicorp.net; ssl_certificate /usr/local/httpsSSL/server.crt; ssl_certificate_key /usr/local/httpsSSL/server.key; ssl_session_timeout 5m; ssl_session_cache shared:SSL:1m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:! NULL:aNULL:! MD5:! ADH:! RC4; ssl_protocols TLSv1 TLSv11. TLSv12.;
    ssl_prefer_server_ciphers  on;
 
    location / {

	gzip on;
	gzip_http_version 1.1;
	gzip_comp_level 3;	    
	gzip_vary on;
	gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;
	
        root   /home/dist/IURS;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
}

server {
    listen       80;
    server_name  localhost;

    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;

 #   location / {
 #       root   /usr/share/nginx/html;
 #       index  index.html index.htm;
 #   }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
#    location = /50x.html {
#        root   /usr/share/nginx/html;
#    }

    location / {
        root   /home/dist/IURS;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; 
    }
}

server {
    listen       8080;
    server_name  localhost;
    location / {
        root   /home/deploy/IURS;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }


    # proxy the PHP scripts to Apache listening on 127.0. 01.:80
    #
    #location ~ \.php$ {
    #    proxy_pass   http:/ / 127.0.0.1;
    #}

    # pass the PHP scripts to FastCGI server listening on 127.0. 01.:9000
    #
    #location ~ \.php$ {
    #    root           html;
    #    fastcgi_pass   127.0. 01.:9000;
    #    fastcgi_index  index.php;
    #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
    #    include        fastcgi_params;
    #}

    # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #}}Copy the code

It’s only five lines, just Google the relevant Gzip configuration and add it. Jingyan.baidu.com/article/bea…

Finally, the initial loading speed is reduced to a few hundred milliseconds, which is great!

Incidentally, the version of the HTTP protocol corresponding to gzip_http_version can be viewed through the browser developer tool Network