Skip to content

Instantly share code, notes, and snippets.

@kamranayub
Last active Jun 24, 2022
Embed
What would you like to do?
React Production Profiling Support for Next.js
//
// See: https://kentcdodds.com/blog/profile-a-react-app-for-performance#build-and-measure-the-production-app
// See: https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
const TerserPlugin = require('next/dist/compiled/terser-webpack-plugin');
module.exports = {
webpack: (config, options) => {
//
// Use profiler-enabled React builds
//
config.resolve.alias = {
...config.resolve.alias,
'react-dom$': 'react-dom/profiling',
'scheduler/tracing': 'scheduler/tracing-profiling',
};
//
// Disable mangling for easier profiling
// WARNING: This increases bundle size, DO NOT DO THIS in production!
//
const terser = config.optimization.minimizer.find((plugin) => plugin instanceof TerserPlugin);
if (terser) {
terser.options.terserOptions = {
...terser.options.terserOptions,
keep_classnames: true,
keep_fnames: true,
};
}
return config;
}
}
@kamranayub
Copy link
Author

kamranayub commented Jun 12, 2020

I think you could safely remove L4 and replace L22 with this as well, if you wanted to maybe remove a possible internal dependency:

- const TerserPlugin = require('next/dist/compiled/terser-webpack-plugin');

- const terser = config.optimization.minimizer.find((plugin) => plugin instanceof TerserPlugin);
+ const terser = config.optimization.minimizer.find((plugin) => plugin?.options?.terserOptions);

That will search for the TerserPlugin without comparing the exact instance. 🤷 Up to you!

Note: I originally tried options.webpack.TerserPlugin but that didn't work 😢

@markerikson
Copy link

markerikson commented Jul 1, 2021

This doesn't seem to work with Next 11. Next appears to handle minification via Terser internally now, rather than adding a plugin to the Webpack config:

https://github.com/vercel/next.js/blob/0af3b526408bae26d6b3f8cab75c4229998bf7cb/packages/next/build/webpack/plugins/terser-webpack-plugin/src/minify.js

@JCMais
Copy link

JCMais commented Nov 3, 2021

I had to patch the minify function directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment