npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

nuxt-memwatch

v0.1.2

Published

Quickly watch real-time memory stats of your nuxt app

Downloads

628

Readme

Quickly watch real-time memory stats of your nuxt app

npm npm (scoped with tag)

Introduction

This module gives you better insights in the heap usages of your nuxt server. Especially when using the node-memwatch peer dependency it can be used to help track down memory leaks. This module uses node-memwatcher and node-memwatch, see their readme's for more information

Allthough other tools may provide the same or better functionality, this module is probably the quickest.

Setup

:information_source: Please note you dont need to re-build your project when en-/disabling this module, you only need to restart the server

Install
npm install --save nuxt-memwatch
// or
yarn add nuxt-memwatch
Install the node-memwatcher peer dependency (recommended)
npm install --save @airbnb/node-memwatch
// or
yarn add @airbnb/node-memwatch
Add nuxt-memwatch to modules section of nuxt.config.js
  modules: [
    ['nuxt-memwatch', { averages: true }],
  ]

or

  modules: [
    'nuxt-memwatch'
  ],
  memwatch: {
    graph: true,
    graphSetup(setup) {
      setup.metrics.malloc = {
        aggregator: 'avg',
        color: 'cyan'
      }
    },
    graphAddMetric(turtleGraph, stats) {
      turtleGraph.metric('my metrics', 'malloc').push(stats.malloced_memory)
    }
  }

Example

You can run the included example by cloning this repo, run yarn install && yarn build and finally yarn start. Then generate some requests by running ab -c100 -n100000 http://127.0.0.1:3000/, this example uses max ~1.3GB of memory which is fine-tuned for node's default heap size limit of 1.5GB (more specifically, 1.5GB is the default limit of the old space)

Running in development mode

Nuxt is not running (memory) 'optimised' in development mode. Memory leaks are likely so although its' possible to use this module in development mode it is not recommended.

FAQ

Please check the node-memwatcher FAQ

Module Options

Besides the default node-memwatcher options, this module provides some extra options

gcAfterEvery number (0)

If set to a number larger then 0, we will force the gc to run after this number of requests. E.g. when set to 1 the gc runs after every request

:fire: This only works when you have either installed the peer dependency or are running node with --expose_gc

nuxtHook string (listen)

Memory leaks and heap usages are probably mostly interesting when the nuxt server is running and serving requests. Therefore we start listening for stats events on the listen hook, unless you are running this module in development mode, then we listen for build:done instead (when you havent change this value). If e.g you would like to debug nuxt generate you could do:

// nuxt.config.js

import { getMemwatch } from 'node-memwatcher'
let memwatch

export default {
  ...
  memwatch: {
    graph: false,
    nuxtHook: 'generate:before'
  },
  hooks: {
    generate: {
      async before() {
        memwatch = await getMemwatch()
      },
      routeCreated() {
        // this probably wont work as you expect
        // as node/v8 will probably be too busy to run the gc
        // but more importantly there is not really a nuxt hook
        // available to do this in the right place
        // This does work however, but the gc call at route `n`
        // can only clear memory usage by previous routes `< n`
        memwatch.gc()
      }
    }
  }
  ...