Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Router-link has excessive memory usage

See original GitHub issue

Version

3.1.3

Reproduction link

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Back and forward navigation cancel</title>
  </head>
  <body>
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router"></script>

    <div id="app">
      <h1>Memory consumption test</h1>
      <router-view />
    </div>

    <script>
      const Home = {
        template: `
      <div>
        <input type="button" @click="showList()" value="Begin" />
        <div class="links" v-if="linksToShow">
          <div><input type="button" @click="hideList()" value="X" /></div>
          <ul>
            <li v-for="link in linksToShow" :key="link.id">
              <span class="colorDot" :class="link.status"></span>
              <router-link :to="\'/details/\' + link.id"
                >{{ link.id }}</router-link
              >
            </li>
          </ul>
        </div>
      </div>
        `,
        data() {
          const statuses = ['outdated', 'unused', 'alarm', 'alert', 'normal']
          this.links = []
          for (let i = 0; i < 3000; i++) {
            const status = statuses[Math.floor(Math.random() * statuses.length)]
            this.links.push(
              Object.freeze({
                id: i.toString().padStart(10, '0'),
                status: status
              })
            )
          }
          return {
            linksToShow: null
          }
        },
        methods: {
          hideList() {
            this.linksToShow = null
          },
          showList() {
            this.linksToShow = this.links
          }
        }
      }

      const Details = {
        data() {
          return {
            selectedLinkId: null
          }
        },
        mounted() {
          this.selectedLinkId = this.$route.params.linkId
        },
        template:
          '<div><router-link to="/">Back to Home</router-link><h1 v-if="selectedLinkId">{{ selectedLinkId }}</h1></div>'
      }

      Vue.use(VueRouter)

      const router = new VueRouter({
        // mode: 'history',
        routes: [
          { path: '/', component: Home },
          { path: '/details', component: Details }
        ]
      })

      // router.push('/')

      new Vue({
        router,
        el: '#app'
      })
    </script>
  </body>
</html>

Steps to reproduce

Take note of memory usage for your browser
Click the “Begin” button in the top left corner of the reproduction
Review memory usage of the browser
Click the “X” button right below the “Begin” button
Review memory usage of the browser

What is expected?

A reasonable amount of memory is used for a component and that memory is released when the component is no longer utilized

What is actually happening?

router-link is using an excessive amount of memory and is not able to release it

I Optional reproduction steps:

Close the browser window and open the reproduction in a fresh instance
Edit the Home.template so that instead of there being a <router-link> tag, it uses another element (I tried it with an a tag as well as a span tag)
Also edit the </router-link> tag to be a closing tag for whatever element you chose in the previous step
Take note of memory usage of the browser
Click the “Begin” button in the top left corner of the reproduction
Wait a few seconds for the text to appear
Review memory usage of the browser
Compare the significant difference from router-link results

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

posvacommented, Jan 23, 2020

So I took a second look and in the initial repro the Home component was used both as the App component (the root) and a route, which is incorrect usage. I updated the repro with the repro I used and replaced the router-link component with a regular one that does nothing and the memory consumption of router-link is double to a stateful component with a slot that does nothing. The difference per component in terms of size was about 6kb which seems reasonable given each router-link holds event listeners and location information. I also tested in dev vs production and the difference was very small.

PR reducing memory usage are of course welcome but right now I don’t see any actionable task I can take here

1reaction

posvacommented, Jan 23, 2020

3mb for just 300 router-links is indeed too much, this requires more investigation, there must be something holding too much memory. If anybody wants to take a look, please do