mirror of
https://github.com/twentyhq/twenty
synced 2026-04-21 13:37:22 +00:00
eb1ca1b9ec
## Summary
Logic-function bundles produced by the twenty-sdk CLI were ~1.18 MB even
for a one-line handler. Root cause: the SDK shipped as a single bundled
barrel (`twenty-sdk` → `dist/index.mjs`) that co-mingled server-side
definition factories with the front-component runtime, validation (zod),
and React. With no `\"sideEffects\"` declaration on the SDK package,
esbuild had to assume every module-level statement could have side
effects and refused to drop unused code.
This PR restructures the SDK so consumers' bundlers can tree-shake at
the leaf level:
- **Reorganized SDK source.** All server-side definition factories now
live under `src/sdk/define/` (agents, application, fields,
logic-functions, objects, page-layouts, roles, skills, views,
navigation-menu-items, etc.). All front-component runtime
(components, hooks, host APIs, command primitives) lives under
`src/sdk/front-component/`. The legacy bare `src/sdk/index.ts` is
removed; the bare `twenty-sdk` entry no longer exists.
- **Split the build configs by purpose / runtime env.** Replaced
`vite.config.sdk.ts` with two purpose-specific configs:
- `vite.config.define.ts` — node target, externals from package
`dependencies`, emits to `dist/define/**`
- `vite.config.front-component.ts` — browser/React target, emits to
`dist/front-component/**`
Both use `preserveModules: true` so each leaf ships as its own `.mjs`.
- **\`\"sideEffects\": false\`** on `twenty-sdk` so esbuild can drop
unreferenced re-exports.
- **\`package.json\` exports + \`typesVersions\`** updated: dropped the
bare \`.\` entry, added \`./front-component\`, and pointed \`./define\`
at the new per-module dist layout.
- **Migrated every internal/example/community app** to the new subpath
imports (`twenty-sdk/define`, `twenty-sdk/front-component`,
`twenty-sdk/ui`).
- **Added \`bundle-investigation\` internal app** that reproduces the
bundle bloat and demonstrates the fix.
- Cleaned up dead \`twenty-sdk/dist/sdk/...\` references in the
front-component story builder, the call-recording app, and the SDK
tsconfig.
## Bundle size impact
Measured with esbuild using the same options as the SDK CLI
(\`packages/twenty-apps/internal/bundle-investigation\`):
| Variant | Imports | Before | After |
| ----------------------- |
------------------------------------------------------- | ---------- |
--------- |
| \`01-bare\` | \`defineLogicFunction\` from \`twenty-sdk/define\` |
1177 KB | **1.6 KB** |
| \`02-with-sdk-client\` | + \`CoreApiClient\` from
\`twenty-client-sdk/core\` | 1177 KB | **1.9 KB** |
| \`03-fetch-issues\` | + GitHub GraphQL fetch + JWT signing + 2
mutations | 1181 KB | **5.8 KB** |
| \`05-via-define-subpath\` | same as \`01\`, via the public subpath |
1177 KB | **1.7 KB** |
That's a ~735× reduction on the bare baseline. Knock-on benefits for
Lambda warm + cold starts, S3 upload size, and \`/tmp\` disk usage in
warm containers.
## Test plan
- [x] \`npx nx run twenty-sdk:build\` succeeds
- [x] \`npx nx run twenty-sdk:typecheck\` passes
- [x] \`npx nx run twenty-sdk:test:unit\` passes (31 files / 257 tests)
- [x] \`npx nx run-many -t typecheck
--projects=twenty-front,twenty-server,twenty-front-component-renderer,twenty-sdk,twenty-shared,bundle-investigation\`
passes
- [x] \`node
packages/twenty-apps/internal/bundle-investigation/scripts/build-variants.mjs\`
produces the sizes above
- [ ] CI green
Made with [Cursor](https://cursor.com)
53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import path from 'path';
|
|
import { type PackageJson } from 'type-fest';
|
|
import { defineConfig } from 'vite';
|
|
import tsconfigPaths from 'vite-tsconfig-paths';
|
|
|
|
import packageJson from './package.json';
|
|
|
|
export default defineConfig(() => {
|
|
return {
|
|
root: __dirname,
|
|
cacheDir: '../../node_modules/.vite/packages/twenty-sdk-front-component',
|
|
resolve: {
|
|
alias: {
|
|
'@/': path.resolve(__dirname, 'src') + '/',
|
|
},
|
|
},
|
|
plugins: [
|
|
tsconfigPaths({
|
|
root: __dirname,
|
|
}),
|
|
],
|
|
build: {
|
|
emptyOutDir: false,
|
|
outDir: 'dist/front-component',
|
|
sourcemap: true,
|
|
lib: {
|
|
entry: 'src/sdk/front-component/index.ts',
|
|
name: 'twenty-sdk-front-component',
|
|
formats: ['es', 'cjs'],
|
|
fileName: (format) => `index.${format === 'es' ? 'mjs' : 'cjs'}`,
|
|
},
|
|
rollupOptions: {
|
|
onwarn: (warning, warn) => {
|
|
if (
|
|
warning.code === 'MODULE_LEVEL_DIRECTIVE' &&
|
|
warning.message.includes('"use client"')
|
|
) {
|
|
return;
|
|
}
|
|
warn(warning);
|
|
},
|
|
external: (id: string) => {
|
|
const deps = Object.keys(
|
|
(packageJson as PackageJson).dependencies || {},
|
|
);
|
|
|
|
return deps.some((dep) => id === dep || id.startsWith(dep + '/'));
|
|
},
|
|
},
|
|
},
|
|
logLevel: 'warn' as const,
|
|
};
|
|
});
|