Menu
I see 3 different version of one package in the yarn.lock, for example:
[email protected]:
version "1.6.10"
resolved "https://registry.yarnpkg.com/angular/-/angular-1.6.10.tgz#eed3080a34d29d0f681ff119b18ce294e3f74826"
integrity sha512-PCZ5/hVdvPQiYyH0VwsPjrErPHRcITnaXxhksceOXgtJeesKHLA7KDu4X/yvcAi+1zdGgGF+9pDxkJvghXI9Wg==
angular@>=1.4.0, angular@^1.0.8:
version "1.7.7"
resolved "https://registry.yarnpkg.com/angular/-/angular-1.7.7.tgz#26bd87693deadcbd5944610a7a0463fc79a18803"
integrity sha512-MH3JEGd8y/EkNCKJ8EV6Ch0j9X0rZTta/QVIDpBWaIdfh85/e5KO8+ZKgvWIb02MQuiS20pDFmMFlv4ZaLcLWg==
angular@~1.2.0:
version "1.2.32"
resolved "https://registry.yarnpkg.com/angular/-/angular-1.2.32.tgz#df52625a5167919931418dda3a9208b9f5fa3db4"
integrity sha1-31JiWlFnkZkxQY3aOpIIufX6PbQ=
Does that mean the final bundle contains all of them, otherwise how webpack knows which version to select? What is the best practice in the community to deal with that? I know about --flat option but there are thousands packages, it would take a while for me to select one for each.
900
Since yarn. lock is a flattened list of all dependencies that your projects needs to run, transitive dependencies are defined at the same level as dependencies your project defines directly. This line may contain multiple entries if multiple versions of the same package are requested in different pacakge. json files.
I found a solution by use a custom alias when installing a package with npm or yarn. Alias allows you to install multiple versions of a same package in the same project. When you want to install a specific version of the package append the command with @<package-version> .
If you remove the lock file completely and then run yarn install , yarn will re-resolve all versions to the latest allowed by their specified ranges, and thus fix all those duplicated deps.
When present in the project, yarn. lock is the main source of information about the current versions of dependencies in a project. Yarn uses that information to check if it needs to update anything – it compares dependency versions currently installed in a project (listed in yarn.
As another answer mentioned, these extra versions can be due to dev dependencies and may not actually end up in your shipped JS bundle. I'd recommend using a bundle analyzer to ensure that your app only ships with a single version of all large modules like angular.
Another thing to note is that yarn v1.x does not aggressively optimize and de-duplicate module versions. If you want the smallest number of packages in your yarn.lock file, you'll want to execute the utility npm module yarn-deduplicate immediately after adding or upgrading yarn packages, ie:
npm install -g yarn-deduplicate
yarn-deduplicate yarn.lock
This utility will analyze and optimize the yarn.lock file so that all version dependencies are satisfied with a minimal set of modules. In your example above, running yarn-deduplicate yarn.lock would likely consolidate the first 2 angular versions in your yarn.lock into a single version:
angular@>=1.4.0, angular@^1.0.8, [email protected]:
version "1.6.10"
resolved "https://registry.yarnpkg.com/angular/-/angular-1.6.10.tgz#eed3080a34d29d0f681ff119b18ce294e3f74826"
integrity sha512-PCZ5/hVdvPQiYyH0VwsPjrErPHRcITnaXxhksceOXgtJeesKHLA7KDu4X/yvcAi+1zdGgGF+9pDxkJvghXI9Wg==
This optimization/de-duplication is built into yarn v2.x, so I'd recommend upgrading yarn so that you do not have to worry about this issue going forward with your project.
85
To investigate how many times a depenedency is installed and what packages dependens on it (recursivly), run: yarn why <package-name>.
See if you can upgrade (or downgrade) some packages to ensure that all of the dependencies in your package are using the same version of angular.
For example: yarn why execa:
yarn why v1.22.5
[1/4] 🤔 Why do we have the module "execa"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "[email protected]"
info Has been hoisted to "execa"
info Reasons this module exists
- "workspace-aggregator-c3b3be41-6d00-4635-98a6-d5373b215152" depends on it
- Specified in "devDependencies"
- Hoisted from "_project_#pretty-quick#execa"
- Hoisted from "_project_#@tahini#nc#execa"
- Hoisted from "_project_#execa"
- Hoisted from "_project_#jest#@jest#core#jest-changed-files#execa"
info Disk size without dependencies: "136KB"
info Disk size with unique dependencies: "520KB"
info Disk size with transitive dependencies: "736KB"
info Number of shared dependencies: 19
=> Found "lint-staged#[email protected]"
info This module exists because "_project_#lint-staged" depends on it.
info Disk size without dependencies: "76KB"
info Disk size with unique dependencies: "400KB"
info Disk size with transitive dependencies: "616KB"
info Number of shared dependencies: 19
=> Found "sane#[email protected]"
info This module exists because "_project_#jest-haste-map#sane" depends on it.
info Disk size without dependencies: "40KB"
info Disk size with unique dependencies: "328KB"
info Disk size with transitive dependencies: "524KB"
info Number of shared dependencies: 16
=> Found "create-folder-structure#[email protected]"
info Reasons this module exists
- "_project_#create-folder-structure#pretty-quick" depends on it
- Hoisted from "_project_#create-folder-structure#pretty-quick#execa"
info Disk size without dependencies: "76KB"
info Disk size with unique dependencies: "400KB"
info Disk size with transitive dependencies: "616KB"
info Number of shared dependencies: 19
=> Found "term-size#[email protected]"
info This module exists because "_project_#nodemon#update-notifier#boxen#term-size" depends on it.
info Disk size without dependencies: "36KB"
info Disk size with unique dependencies: "324KB"
info Disk size with transitive dependencies: "520KB"
info Number of shared dependencies: 16
Note:
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
