Next.js: Webpack bundle analyzer with custom server (express)

[arefaslani]

I have a custom express server. This is my server config:

// server.js
const next = require('next')
const cookiesMiddleware = require('universal-cookie-express')

const routes = require('../routes')
const app = next({ dev: process.env.NODE_ENV !== 'production' })
const handler = routes.getRequestHandler(app)

// With express
const express = require('express')
app.prepare().then(() => {
  express()
    .use(cookiesMiddleware())
    .use(handler)
    .listen(3000)
})

I run the server with this start script in production:

  "scripts": {
    "dev": "node server",
    "build": "next build",
    "start": "NODE_ENV=production node server"
  }

And I've added the webpack analyzer in the next config file:

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

module.exports = {
  webpack: (config, { dev }) => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: 'empty'
    }

    config.plugins.push(new BundleAnalyzerPlugin({
        // For all options see https://github.com/th0r/webpack-bundle-analyzer#as-plugin
        analyzerMode: "server",
        analyzerHost: "127.0.0.1",
        analyzerPort: 8888,
        openAnalyzer: false
    }));

    return config
  }
}

When I run the command yarn build it listens to port 8888 and waits for connections. This is good for development environment, but when I run the build command I want to build the bundle and exit. But that way I don't know how to analyze bundled js files. Is there any way to analyze a currently built bundle?

[sergiodxa]

Change the analyzerMode to static instead of server, it will generate static files for your bundle, as described in the plugin docs.