Lodash gatsby plugin and bundle sizes

[juanbiberretta]

Hello everyone!

I've been playing around with decreasing the size of our project and came across the gatsby-plugin-lodash that utilizes both the webpack and babel plugins to cherry-pick and trim the module. I had the webpack bundle analyzer show me what it looks like and this is what I get:

Close up

I was under the impression that using the plugins would mean I only kept around a trimmed version of library, which is what I believe I see in the commons- bundle, but I'm not sure what the other, full, version of the package is doing hanging out in the hashed bundle. How can I tell if the full version is getting used? I'm aware that the commons-{hash} bundle is sent to all my pages...

Maybe all's good and this is how it's supposed to be, but I've been wondering about this for a while. I just hope I'm doing it right.

My package versions:

 "lodash": "^4.17.20",
"gatsby-plugin-lodash": "^3.3.10",
"gatsby": "2.26.0",

gatsby-config.js

const plugins = [
  'gatsby-plugin-lodash',
...
]

I'm not sure if this matters much but I'll put it here for good measure, we have a custom .babelrc.:

{
  "presets": [
    ["@babel/preset-env", { "modules": false }],
    "@babel/preset-react",
    "@babel/typescript"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "babel-plugin-styled-components"
  ],
  "env": {
    "test": {
      "plugins": ["babel-plugin-styled-components", "require-context-hook"],
      "presets": ["@babel/preset-env", "@babel/preset-react"]
    }
  }
}

We have a mixture of files importing things like import get from lodash/get and import { get } from 'lodash' but that shouldn't matter since the whole point of the Babel plugin is that it transpiles this to use modular imports.

Would love any insights, thank you!

[wardpeet]

That's odd, any reason why you're stuck on version 2.26.0? Do you by any chance have a require('lodash') somewhere?

[juanbiberretta]

@wardpeet Ok so just verifying that what I'm seeing shouldn't be the case, correct? No, I'm pretty sure there's no straight up just require('lodash') anywhere, though I do that plenty of const { get } = require('lodash') but Babel's supposed to translate that to const get = require('lodash/get'), no?

We're still in 2.26 because upgrading to 2.32 gives us a very strange issue on our CI/CD, Buildkite, where for every tick of the createPages spinner (or any of the little square dots spinners) it re-prints logs, resulting in like 60mb+ build logs... It's pretty bizarre, I've scoured the changelogs to see if anything with how the build reporting changed but couldn't come up with anything useful