首次部署前端页面加载速度优化过程

2023年7月11日 188次阅读

前言

首次部署项目，刚开始时采用vue的dev在线上跑，发现了很多问题，其中最大的问题就是响应太慢时间太久。由于服务器时1g、1m、1核的ubuntu云服务器，访问一个1m多的文件居然要好几十秒，很明显是有很大问题的。下面是优化的过程。

将前端文件采用nginx转发

将dev服务改为静态文件服务，这里有两种选择，一是起一个node静态文件服务和请求转发，一是用nginx做静态文件服务和请求转发，考虑到nginx配置比较简单，并且是专门用来做这个的，所以选择用了nginx。我vue-router使用的history api，所以nginx需要坐下额外的配置，在location / 里面加了一行try_files $uri /index.html;然后build，将root指向dist，完整如下：

    location / {
           root  /home/ubuntu/front/vue-blog/dist/;
           index  index.html index.htm;
           try_files $uri /index.html;
        }

请求了下，发现依旧比较慢，看了下原来是忘记压缩代码了。

减小请求包的大小

1、build时加上压缩，使用了uglifyjs-webpack-plugin这个插件，现在最大的app.js包（已经分包，并按需加载）在200k左右，发现页面响应速度明显加快，但还是不够。
2、将vue.js、vue-router等第三方包采用externals的方式载入页面。此时发现包大小在150k左右。
3、进一步查看，发现样式文件居然也被打包到js里面去了，所以将样式文件单独提取出来，采用mini-css-extract-plugin插件。此时发现app.js还有80k左右。
4、将nginx配置上gzip，配置如下：

   gzip  on;
    gzip_static on;
    gzip_min_length  5k;
    gzip_buffers     4 16k;
    #gzip_http_version 1.0;
    gzip_comp_level 6;
    gzip_types     application/javascript  text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;

这里特别需要注意gzip_types字段必须和你响应的content-type一致，否则不会生效。这里的gzip_comp_level也需要合理设置，值为1～9，越大压缩越厉害，耗时也越多，我这采用6已经偏大。此时再看获取到的页面，最大文件app.js为26k。在访问速度就很快了。

TODO

这里还有几个点是待完善的。
1、升级到http2，所有请求可以并发，页面会更快加载。
2、root不能为dist文件，因为我每次部署都是服务器自己pull代码然后build，这样会导致页面有几十秒的不可访问。服务端的代码也不能直接使用上传那个位置的文件，这也会导致服务端有几十秒的不可用。

点赞