Next js 9.2.2 get page performance issue like unused javascript bundle

[dpkpaa]

here is my next.config.js

const webpack = require("webpack");
require("dotenv").config({ path: __dirname + "/.env" });
const withPlugins = require("next-compose-plugins");
const withOffline = require("next-offline");
const withCSS = require("@zeit/next-css");
const withPurgeCss = require("next-purgecss");
const withSourceMaps = require("@zeit/next-source-maps");
const TerserPlugin = require("terser-webpack-plugin");
const withBundleAnalyzer = require("@next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
const isProd = process.env.NODE_ENV === "production";

const nextConfig = {
useFileSystemPublicRoutes: false,
compress: true,
assetPrefix: isProd ? process.env.APP_URL : "",
exportTrailingSlash: true,
devIndicators: {
autoPrerender: false,
buildActivity: true,
},

webpack: (config, { dev, isServer }) => {
const env = Object.keys(process.env).reduce((acc, curr) => {
acc[process.env.${curr}] = JSON.stringify(process.env[curr]);
return acc;
}, {});
// Fixes npm packages that depend on fs module
config.node = {
fs: "empty",
};
config.plugins.push(new webpack.DefinePlugin(env));
if (!dev && !isServer) {
config.optimization.minimize = true;
config.optimization.minimizer.push(new TerserPlugin());
}

// Polyfills
const originalEntry = config.entry;
config.entry = async () => {
  const entries = await originalEntry();

  if (
    entries["main.js"] &&
    !entries["main.js"].includes("./client/polyfills.js")
  ) {
    entries["main.js"].unshift("./client/polyfills.js");
  }

  return entries;
};

return config;

},
};

module.exports = withPlugins(
[
[withOffline, { dontAutoRegisterSw: true }],
[withCSS, {}],
[
withPurgeCss,
{
purgeCssEnabled: ({ dev, isServer }) => !dev && !isServer, // Only enable PurgeCSS for client-side production builds
purgeCssPaths: [
"pages//*",
"components//",
"utils/**/", // also scan utils folder
],
},
],
[withSourceMaps],
[withBundleAnalyzer],
],
nextConfig
);

[jamesmosier]

What exact issue are you having?

If it is unused JavaScript, see this Discussion which describes what Lighthouse does but most importantly points out:

It is somewhat inevitable that some subset of JavaScript will be unused when using someone's library