Vue2 SSR 的优化之旅

反射冰川
• 阅读 13575

自从 Vue2 出正式版后, 就开始了 SSR 之旅, 不过之前用的都是虚拟主机, 部署不了 SSR, 所以也只是在本地写着玩, 双 11 的时候, 买了个某云主机, 正式开始了 SSR 之旅, 然后过程并不顺利, 部署, 运行都没问题, 但是发现内存泄漏严重, 1核1G内存的主机根本负担不了, 没什么访问量的情况下, 几个小时的时间, 1G 内存就用光, 明显有很严重的内存泄漏, 在本地环境压测, rps(每秒请求数) 无限接近于 1, 在云服务器更是压测都完成不了, 于是开始了优化之旅

1. 内存泄漏

经过查资料和测试, 发现 axios 和 vue-meta 都有内存泄漏之嫌

vue-meta

之前有写过一篇 Vue2 SSR渲染, 如何根据不同页面修改 meta?, 既然这个有内存泄漏的嫌疑, 只好先把代码恢复回去

axios

axios 的拦截器在 node 端也会导致内存泄漏, 因为之前版本是 SPA 版的, axios 配置也是针对 SPA 的配置, 里面有用到拦截器, 并且有大量的逻辑处理在里面, 包括加载进度, 错误处理等等, 这些逻辑在 node 端是没有任何意义的, 那么我们就需要对 node 端写个专门的 axios 配置文件

2. 缓存

缓存主要包括两个部分:

  • 服务端的 api 数据缓存

  • 组件的缓存

服务端的 api 数据缓存

昨天已经写了一篇文章: Vue2 SSR 缓存 Api 数据, 这里不再多说, 上面 axios 服务端配置文件中, 也有相关代码

组件的缓存

首先先安装lru-cache
然后在server.jscreateBundleRenderer的时候带上缓存的配置

require('vue-server-renderer').createBundleRenderer(bundle, {
    cache: require('lru-cache')({
        max: 1000, // 缓存最大数量
        maxAge: 1000 * 60 * 15, // 缓存时间 15分钟
    })
})

在组件里申明 key

serverCacheKey: () => {
    return `aside::account`
}

组件缓存的相关用法, 请参考官方文档:
https://github.com/vuejs/vue/...

注意: 一般情况下, 我们不要给容器型组件, 只给展示型组件加缓存, 如一个组件是静态组件, 如组件的数据是通过 props 传进去的

3. 配置 nginx

一般情况我们都需要用 nginx 或者 apache 做端口转发,

server {
    listen 80;
    server_name mmxiaowu.com www.mmxiaowu.com ssr.mmxiaowu.com;
    location / {
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host  $http_host;
         proxy_set_header X-Nginx-Proxy true;
         proxy_set_header Connection "";
         proxy_pass http://127.0.0.1:8080;
    }
}

我们可以修改下配置文件, 让静态文件直接走 nginx, 不再经过 nodejs

server {
    listen 80;
    server_name mmxiaowu.com www.mmxiaowu.com ssr.mmxiaowu.com;
    location ~ ^/(static|upload)/  {
         root /your/webroot/mmf-blog-vue2-ssr/dist;
         expires 30d;
    }
    location / {
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header Host  $http_host;
         proxy_set_header X-Nginx-Proxy true;
         proxy_set_header Connection "";
         proxy_pass http://127.0.0.1:8080;
    }
}

经过以上一些优化后, 再进行一次压测:

E:\web\webpack\mmf-blog-vue2-ssr>loadtest -n 2000 http://localhost:8080/
[Sat Dec 31 2016 14:12:17] INFO Requests: 0 (0%), requests per second: 0, mean latency: 0 ms
[Sat Dec 31 2016 14:12:22] INFO Requests: 246 (12%), requests per second: 49, mean latency: 20.3 ms
[Sat Dec 31 2016 14:12:27] INFO Requests: 508 (25%), requests per second: 52, mean latency: 19 ms
[Sat Dec 31 2016 14:12:32] INFO Requests: 773 (39%), requests per second: 53, mean latency: 18.8 ms
[Sat Dec 31 2016 14:12:37] INFO Requests: 1036 (52%), requests per second: 53, mean latency: 19 ms
[Sat Dec 31 2016 14:12:42] INFO Requests: 1296 (65%), requests per second: 52, mean latency: 19.2 ms
[Sat Dec 31 2016 14:12:47] INFO Requests: 1548 (77%), requests per second: 50, mean latency: 19.9 ms
[Sat Dec 31 2016 14:12:52] INFO Requests: 1776 (89%), requests per second: 46, mean latency: 21.8 ms
[Sat Dec 31 2016 14:12:57] INFO
[Sat Dec 31 2016 14:12:57] INFO Target URL:          http://localhost:8080/
[Sat Dec 31 2016 14:12:57] INFO Max requests:        2000
[Sat Dec 31 2016 14:12:57] INFO Concurrency level:   1
[Sat Dec 31 2016 14:12:57] INFO Agent:               none
[Sat Dec 31 2016 14:12:57] INFO
[Sat Dec 31 2016 14:12:57] INFO Completed requests:  2000
[Sat Dec 31 2016 14:12:57] INFO Total errors:        0
[Sat Dec 31 2016 14:12:57] INFO Total time:          39.933183222 s
[Sat Dec 31 2016 14:12:57] INFO Requests per second: 50
[Sat Dec 31 2016 14:12:57] INFO Mean latency:        19.9 ms
[Sat Dec 31 2016 14:12:57] INFO
[Sat Dec 31 2016 14:12:57] INFO Percentage of the requests served within a certain time
[Sat Dec 31 2016 14:12:57] INFO   50%      16 ms
[Sat Dec 31 2016 14:12:57] INFO   90%      27 ms
[Sat Dec 31 2016 14:12:57] INFO   95%      43 ms
[Sat Dec 31 2016 14:12:57] INFO   99%      57 ms
[Sat Dec 31 2016 14:12:57] INFO  100%      133 ms (longest request)

Vue2 SSR 的优化之旅

效果非常不错, rps 已经能达到 50 了, 内存使用也大弧度下降了, 不过在云服务器上依然不够理想, 因为可能是云服务器上数据比本地的多, 另外云服务器的配置太烂...但是随着运行时间的增加, 内存肯定也会上升, 毕竟缓存也是需要占用内存的, 不过这个是属于合理开支...

Vue2 SSR 的优化之旅

过了差不多一天的时间, 内存只涨了 7M 左右...

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
双十一预售活动分析
2022年双十一促销活动已经开始,大家应该都提前开始关注今年双十一活动的时间表了吧?2022年10月24日晚8:00天猫双11预售时间,第一波销售时间10月31日晚8:0,第二波销售时间11月10日晚8:00;天猫双11的优惠力度是跨店每满30050
Stella981 Stella981
3年前
Python Challenge Level 18
初学Python,挑战一下流行的PythonChallenge,很不幸,卡在了18关~~被字符字节码之间的转换搞得焦头烂额,不过终于搞定了还是很happy的~~~主要的问题就是16进制形式的字符如何转成字节码(注意:不是encoding)如:\'89','50','4e','47','0d','0a','1a','0a','00
Wesley13 Wesley13
3年前
FLV文件格式
1.        FLV文件对齐方式FLV文件以大端对齐方式存放多字节整型。如存放数字无符号16位的数字300(0x012C),那么在FLV文件中存放的顺序是:|0x01|0x2C|。如果是无符号32位数字300(0x0000012C),那么在FLV文件中的存放顺序是:|0x00|0x00|0x00|0x01|0x2C。2.  
Wesley13 Wesley13
3年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
3年前
Nginx 和Apache 中的虚拟主机的概念
 在部署环境的时候,有时候会引用到虚拟主机的概念,什么是虚拟主机呢,博主之前一直把虚拟主机的概念没搞清楚,导致在部署的时候,一直动不动就404,或者500,或者服务器不通所以,什么是虚拟主机呢?虚拟主机概念大致同虚拟机的概念。如果你有两个不同域名的网站,但是你只有一台服务器,这时候怎么办?其实利用nginx或者apache都可以帮你用一台机器来模
Stella981 Stella981
3年前
Hibernate纯sql查询结果和该sql在数据库直接查询结果不一致
问题:今天在做一个查询的时候发现一个问题,我先在数据库实现了我需要的sql,然后我在代码中代码:selectdistinctd.id,d.name,COALESCE(c.count_num,0),COALESCE(c.count_fix,0),COALESCE(c
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Stella981 Stella981
3年前
Apache 基于域名的虚拟主机(基于域名 混合多IP)
最近,我有一台debian服务器,双网卡,一个用于提供外网服务,一个用于管理,上面部署有apache,部署了四个基于域名的虚拟主机,现在想把其中两个改成让外网可以访问,两个让内网访问,按照一般的操作完成后,发现第二个设置外网访问的虚拟主机访问不了,访问时内容总是跳转到第一个外网虚拟主机上面,当时知道apache如果找不到相应的虚拟主机会以第一个虚拟主机为默
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
反射冰川
反射冰川
Lv1
巴山楚水凄凉地,二十三年弃置身。
文章
2
粉丝
0
获赞
0