Nuxt.js: Instantiating Vue Router everytime causes serious performance problem

Created on 6 Jun 2020 · 7Comments · Source: nuxt/nuxt.js

Version

v2.8.1

Reproduction link

https://codesandbox.io/s/nuxt-middleware-rxzl4

Steps to reproduce

1.use wrk to simulate large scale of requests
2.remove lots of files from pages folder and simualte again
3.compare QPS between two reports generated from wrk

What is expected ?

The QPS numbers are close

What is actually happening?

If I remove files from pages folder, QPS will increase a lot.

Additional comments?

I looked into Server.js which is generated by nuxt-cli., and I found Vue Router is instanced every time. I assumed that it should be cached in case of performance problem

_{This bug report is available on Nuxt community (#c10737)}

enhancement pending

Source

asd123freedom

👀2

Most helpful comment

I ran into the same problem and located the Vue-Router section.

First, through Clinic analysis, addRouteRecord causes CPU-intensive calculations, as shown below:

addRouterRecord

Secondly, the escapeString function will cause QPS loss, the data is as follows:

escapeString

The source code of escapeString is as follows（QPS=891）：

function escapeString (str) {

    return str.replace(/([.+*?=^!:${}()[\]|\/\\])/g, '\\$1')

}

So, I tried as follows（QPS=1524）：

function escapeString (str) {

    return ''；

}

escapeString

There is a lot of route matching here, is there a more efficient way to solve it？Any help will be appreciated.

chenfengyanyu on 16 Jun 2020

👍6

All 7 comments

manniL on 6 Jun 2020

Yes，it does. I guess it may be solved by using nuxt-community/router-module. With router-module I can make sure vue-router init only once.

asd123freedom on 6 Jun 2020

Yes，it does. I guess it may be solved by using nuxt-community/router-module. With router-module I can make sure vue-router init only once.

can You show your solution with router-module?

vodnicearv on 9 Jun 2020

I've tried this week and failed . Vue SSR Guide tells developers that we also need a fresh router instance for each request

asd123freedom on 11 Jun 2020

😕1

I ran into the same problem and located the Vue-Router section.

First, through Clinic analysis, addRouteRecord causes CPU-intensive calculations, as shown below:

addRouterRecord

Secondly, the escapeString function will cause QPS loss, the data is as follows:

escapeString

The source code of escapeString is as follows（QPS=891）：

function escapeString (str) {

    return str.replace(/([.+*?=^!:${}()[\]|\/\\])/g, '\\$1')

}

So, I tried as follows（QPS=1524）：

function escapeString (str) {

    return ''；

}

escapeString

There is a lot of route matching here, is there a more efficient way to solve it？Any help will be appreciated.

chenfengyanyu on 16 Jun 2020

👍6

Thanks, @chenfengyanyu for the benchmarks. It makes quite a sense If the route registration part is CPU-intensive, finding a way to _cache/compute_ SSR routes once. But we cannot simply create a shared instance for SSR! So we probably need to see if there is a way in improving vue-router.