Add Webpack Analyzer to scripts

Webpack analyzer is a critical tool to see whats contributing to your bundle size.

We STRONGLY recommend having a script that generates the Bundle analyzer so that team members can see what npm modules or import scripts are bloating their bundle sizes.

With NX in the workspace.json script its as simple as adding a new executor command.

Reference Links: https://www.npmjs.com/package/@next/bundle-analyzer

Next.js

//next.config.js
const withBundleAnalyzer = require('@next/bundle-analyzer')({
  enabled: process.env.ANALYZE === 'true',
});

module.exports = withBundleAnalyzer({
  // rest og custom config
});

In workspace.json file add this

// workspace.json
        "analyze": {
          "builder": "@nrwl/workspace:run-commands",
          "options": {
            "command": "ANALYZE=true NODE_ENV=production yarn nx build spark-account --prod"
          }
        },

Once this is setup you can simply generate the bundle analyzer by running the following command

yarn nx analyze <app-Name>

Next.js​

Next.js