Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: use dev/prod conditions instead of webpack in exports #5858

Merged
merged 5 commits into from
Apr 14, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 78 additions & 0 deletions .size-limit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/**
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
*/
'use strict';

/**
* We use this file to configure the size-lmit tool, rather than their simpler
* yaml package.json configuration, because we need to override the resolution
* of modules to ensure we are pulling in monorepo build products as
* dependencies rather than trying to use something stale from node_modules.
*/
const glob = require('glob');
const path = require('node:path');
const fs = require('fs-extra');

/**
* Build a alias map so that we can be sure that we are resolving monorepo
* dependencies to their corresponding build products and not some combination
* of a build product and a possibly stale/divergent version in node_modules.
*
* Looks like:
*
* {
* lexical: 'packages/lexical/dist/index.js',
* '@lexical/rich-text': 'packages/lexical-rich-text/dist/index.js',
* }
*
* Currently this alias map points at the cjs version of the build product,
* as that is what was measured previously in #3600.
*/
const alias = Object.fromEntries(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pls add comment that explains purpose of this file.
Also can you pls elaborate on why we replace simple config from package.json with this fairly complex file?

Copy link
Collaborator Author

@etrepum etrepum Apr 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It never really worked correctly, outside of the main lexical package anyway, so that's one reason! :)

When checking the size of @lexical/rich-text or @lexical/plain-text it would have to pull in whatever lexical package was in node_modules (plus their other monorepo dependencies like @lexical/clipboard), which would be some previously published version.

The other reason is that it simply didn't work with the simpler configuration. I don't know why or when it stopped working, but that was the primary motivation. I only discovered it was often wrong even in the best of times when I investigated further.

glob('./packages/*/package.json', {sync: true}).flatMap((fn) => {
const pkg = fs.readJsonSync(fn);
if (!pkg.private) {
return Object.entries(pkg.exports).flatMap(([k, v]) => {
if (k.endsWith('.js')) {
return [];
}
return [
[
`${pkg.name}${k.replace(/^\.(\/$)?/, '')}`,
path.resolve(path.dirname(fn), 'dist', v.require.default),
],
];
});
}
return [];
}),
);

const extendConfig = {resolve: {alias}};
const modifyWebpackConfig = (config) => Object.assign(config, extendConfig);

function sizeLimitConfig(pkg) {
return {
path: alias[pkg],
modifyWebpackConfig,
};
}

/**
* These are the packages that were measured previously in #3600
* We could consider adding more packages and/or also measuring
* other build combinations such as esbuild/webpack, mjs/cjs, dev/prod, etc.
*
* The current configuration measures only: webpack + cjs + prod.
*
* In order to also measure dev, we would want to change the size script in
* package.json to run build-release instead of build-prod so both
* dev and prod artifacts would be available.
*/
module.exports = ['lexical', '@lexical/rich-text', '@lexical/plain-text'].map(
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why only these 3 packages? Can we discover them based on the config property in their dirs/package.json? We already do glob here

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think that would be an @fantactuka question (size-limit was introduced in #3600), these were the only modules measured in the previous configuration. Now that we do have more infrastructure to support this size-limit tool we have more options but the measurements are only useful if people care about them and I don't know what the team cares about especially because there is no configured limits such that the build would fail.

sizeLimitConfig,
);
Loading
Loading