deps(lodash): migrate lodash to lodash-es

[ChristopherPHolder]

Summary

Improve Tree-Shaking and bundling by migrating from lodash to lodash-es.

Even tho we are now using individual imports as of #13914 we are still using ComonJS. But since the rest of the repo seems to have migrated to ESM we can now use the ESM packages for lodash which is lodash-es.

An addition benefit of this is that if the code is bundles futher by esbuild it will not require wrapping the use of lodash like this:

Related Issues/PRs

• deps(lodash): use individual lodash modules to reduce bundle size #13914
• Usage of lodash instead of esm version lodash-es #16212

[adamraine]

I just tested the bundle size, we go from 1807771 bytes to 1806087 bytes (so a savings of ~1.6KB)

[adamraine]

I would expect the advantage of tree-shaking to be that we can import everything from the top-level entry point now. For example:

Suggested change

	import cloneDeep from 'lodash-es/cloneDeep.js';
	import {cloneDeep} from 'lodash-es';

Is this something you could do?

[ChristopherPHolder]

Yes, will make the changes 👌

[ChristopherPHolder]

Changes are done

[ChristopherPHolder]

I just tested the bundle size, we go from 1807771 bytes to 1806087 bytes (so a savings of ~1.6KB)

How can i generate a metafile to check the bundle?

I am trying to run the build but having multiple issues. I guess the command should be yarn build-all?

This is the error i get:

$ node ./build/build-cdt-lib.js
$ yarn build-extension-chrome && yarn build-extension-firefox
$ node ./build/build-extension.js chrome
$ node ./build/build-extension.js firefox
$ yarn reset-link && node ./build/build-bundle.js clients/devtools/devtools-entry.js dist/lighthouse-dt-bundle.js && node ./build/build-dt-report-resources.js
$ (yarn unlink || true) && yarn link && yarn link lighthouse
success Unregistered "lighthouse".
info You can now run `yarn unlink "lighthouse"` in the projects where you no longer want to use this package.
success Registered "lighthouse".
info You can now run `yarn link "lighthouse"` in the projects where you want to use this package and it will be used instead.
success Using linked package for "lighthouse".
X [ERROR] Syntax error "s"

    core/user-flow.js:43:50:
      43 │ const str_ = i18n.createIcuMessageFn({url: 'core\user-flow.js'}.url, UIStrings);
         ╵                                                   ^

X [ERROR] Could not resolve "./messages"

    node-modules-polyfills:__zlib-lib/binding:1:16:
      1 │ import msg from './messages';
        ╵                 ~~~~~~~~~~~~
        

[adamraine]

I just checked the bundle size myself (1806556 bytes, so still good)

Not sure what the issue is exactly, are you running on windows? Might be an issue with / vs \ in windows paths.

[connorjclark]

yarn build-all, du -sh dist/**/*