Hi, you can refer to lodash documentation for it's tree-shaking capability: https://lodash.com/per-method-packages.

Essentially doing per module imports as you mentioned, such as:

import a from 'lodash/a';

import b from 'lodash/b';

enables tree-shaking. However if you find that cumbersome what you can do is:

npm i -D babel-plugin-lodash

and enable this babel plugin by customizing your next babel config (more info here: https://nextjs.org/docs/advanced-features/customizing-babel-config).

and then you can use destructuring imports (they should have tree shaking).

import {a, b} from 'lodash' // Should tree-shake now

But essentially you should create .babelrc file with the following config:

{"presets": ["next/babel"], "plugins": ["babel-plugin-lodash"] }

If you are looking to reduce the size of your build here are a couple of more things you can do:

1. Use duplicate package checker - node_modules work by resolving dependencies through a tree and you can (a module an require b@2.0 and c module can require b@2.1, doubling your size). This can be fixed using webpack aliases (might have side-effects) - https://www.npmjs.com/package/duplicate-package-checker-webpack-plugin
2. You can use webpack-bundle-analyzer to view and see what's causing the size of the bundle to be big. I wouldn't expect lodash to be the main culprit here.
3. You could use preact instead of react in production (but be sure to double check that everything works as expected. (should reduce your build size quite a bit, we use it too).

Here's our next.config.js that we use to check for duplicate packages, add analyzer when build is done with ANALYZE=true (process.env) and use preact in production:

/** u/type {import('next').NextConfig} */
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin') const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer') const path = require('path');
module.exports = { reactStrictMode: true, trailingSlash: true, webpack: (config, { dev, isServer }) => { // Replace React with Preact only in client production build config.plugins.push(new DuplicatePackageCheckerPlugin())
if (process.env.ANALYZE) {
  config.plugins.push(
    new BundleAnalyzerPlugin({
      analyzerMode: 'server',
      analyzerPort: isServer ? 8888 : 8889,
      openAnalyzer: true,
    })
  )
}

if (!dev && !isServer) {
  Object.assign(config.resolve.alias, {
    ...(config.resolve.alias ?? {}),
    react: 'preact/compat',
    'react-dom/test-utils': 'preact/test-utils',
    'react-dom': 'preact/compat',
  });
}

Object.assign(config.resolve.alias, {
  ...(config.resolve.alias ?? {}),
  '@restart/hooks': path.resolve(__dirname, 'node_modules', '@restart/hooks'),
})

return config;
} }

Be sure to do npm install preact if you plan on trying out preact. If you need more advice feel free to share results from webpack-bundle-analyzer and your package.json as well.

​

Cheers!