为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html5 Go

前言

首次部署项目,刚开始时采用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,这样会导致页面有几十秒的不可访问。服务端的代码也不能直接使用上传那个位置的文件,这也会导致服务端有几十秒的不可用。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
9109
获赞与收藏
2572

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消