Optimize Core Web Vitals - FCP and LCP: Tree-shaking Lodash

Resources What is lodash-webpack-plugin? https://www.npmjs.com/package/lodash-webpack-plugin https://www.increscotech.com/blog/optimizing-lodash-in-next-js-with-webpack-and-babel-plugin-lodash Why should not use lodash-webpack-plugin? https://zhuanlan.zhihu.com/p/349260482 You-Dont-Need-Lodash-Underscore https://github.com/you-dont-need/You-Dont-Need-Lodash-Underscore What is Module Transpilation? https://cube.dev/blog/dependencies-transpilation Next.js setup related https://github.com/vercel/next.js/issues/2259 Next.js Module Transpilation https://nextjs.org/docs/architecture/nextjs-compiler#module-transpilation Your Lodash Tutorial: How To Import Lodash Libraries https://www.blazemeter.com/blog/import-lodash-libraries Background Currently lodash usage in the project leads to huge bundle size import _ from 'lodash'; Solution 1: replace lodash with lodash-es Step-by-steps Remove existing lodash related packages use yarn remove "lodash": "^4.17.21", "lodash-webpack-plugin": "^0.11.6", "babel-plugin-lodash": "^3.3.4", Remove lodash config from babel plugin "babel": { "presets": [ [ "next/babel", { "env": { "corejs": "3", "useBuiltIns": "entry" } } ] ], "plugins": [ "lodash" ] }, Update next.config.js Add "lodash-es" to transpilePackages, for example, module.exports = { transpilePackages: [ ..., 'lodash-es'], } Errors and solutions After switching to lodash-es, Jest unit test is executed and an error is reported Jest encountered an unexpected token Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax. Root cause https://jestjs.io/docs/ecmascript-modules Jest does not support ESM Solution Switch back to lodash and tree-shaking by changing the import method, and add eslint rules to consist the use of lodash Choose this solution use babel-jest to only transpile jest unit test codes? https://nextjs.org/docs/14/pages/building-your-application/testing/jest https://www.npmjs.com/package/babel-jest However, this solution does not work Solution 2: Replace the current lodash import method with the correct one, and add ESlint rules to standardize the correct use of lodash import Steps Update the lodash import usage in the project Change from import _ from 'lodash'; To import find from 'lodash/find'; Add ESlint no-restricted-imports for lodash Make sure your team follows the same way when importing lodash https://archive.eslint.org/docs/rules/no-restricted-imports https://stackoverflow.com/questions/69621518/custom-eslint-no-restricted-imports-for-lodash-vs-lodash-fp Add below into eslint config "no-restricted-imports": [ "error", { "paths": [ { "name": "lodash", "message": "Import [module] from lodash/[module] instead" } ], "patterns": [ { "group": [ "lodash/set" ], "message": "Import [module] from lodash/fp/[module] instead" } ] } ], Remove unneeded babel-plugin-lodash Run yarn remove babel-plugin-lodash to remove the library. Remove configuration from Babel config plugin ... "plugins": [ "lodash" ] ...

import _ from 'lodash';

"lodash": "^4.17.21",
"lodash-webpack-plugin": "^0.11.6",
"babel-plugin-lodash": "^3.3.4",

"babel": {
    "presets": [
      [
        "next/babel",
        {
          "env": {
            "corejs": "3",
            "useBuiltIns": "entry"
          }
        }
      ]
    ],
    "plugins": [
      "lodash"
    ]
  },

module.exports = {
  transpilePackages: [

      ...,

    'lodash-es'],
}

Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

import _ from 'lodash';

import find from 'lodash/find';

 "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "lodash",
            "message": "Import [module] from lodash/[module] instead"
          }
        ],
        "patterns": [
          {
            "group": [
              "lodash/set"
            ],
            "message": "Import [module] from lodash/fp/[module] instead"
          }
        ]
      }
    ],

...

"plugins": [
      "lodash"
    ]

...

Related Posts

Python Reverse Engineering: What Can You Crack in 2025?

Mar 10, 2025  0

What is bash? How to use it ?

Mar 14, 2025  0

The terminal rises from the ashes ...

Mar 12, 2025  0