Improve tree shaking behavior #979

jleifeld · 2025-11-26T15:54:36Z

What?

Fixes #978

Testing?

See the GH action which validates and checks the bundled output files. Also check the results here: shopware/shopware#13798

Current result:

TODO:

improve non-direct import tree shaking (currently bundles other, unused CSS also)
Optimize bigger components

vercel · 2025-11-26T15:54:42Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
meteor-component-library	Ready	Preview	Comment	Dec 9, 2025 3:23pm

- Added vite-plugin-inspect for enhanced debugging capabilities. - Updated package.json to reflect new file paths for styles and fonts. - Modified Vite configuration to include external package handling and improved entry points. - Added new dependencies and updated existing ones in pnpm-lock.yaml. - Updated .gitignore to exclude .vite-inspect directory.

- Increased size limits for various components in .size-limit.ts to accommodate larger builds. - Updated package.json to correct file paths for styles and fonts. - Enhanced Vite configuration to include new components and improve external package handling. - Added 'onlyBuiltDependencies' to pnpm-workspace.yaml for better dependency management.

- Reduced size limits for various components in .size-limit.ts to optimize performance. - Refactored external package handling in vite.config.ts to streamline configuration.

… bundle size

- Added transformIgnorePatterns for lodash-es in jest.config.js to improve module handling. - Refactored .size-limit.ts for consistent formatting and added missing commas. - Updated Vite configuration for better readability and consistency in import statements. - Enhanced helper functions for component path resolution in build scripts.

…onent library because the final application bundle will handle the whole minifcation

…icon import path in mt-icon.vue

Copilot

Pull request overview

This PR improves tree-shaking behavior for the component library by implementing per-component builds and migrating from lodash to lodash-es. The changes enable better dead code elimination when consumers import individual components.

Key Changes:

Configured Vite to build individual component entry points alongside the main bundle
Added size-limit tooling to track and enforce bundle size limits
Migrated admin-sdk from lodash to lodash-es for better ESM tree-shaking

Reviewed changes

Copilot reviewed 16 out of 17 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
`pnpm-workspace.yaml`	Added esbuild to onlyBuiltDependencies for build optimization
`packages/component-library/vite.config.ts`	Configured multi-entry build with individual component exports and CSS injection
`packages/component-library/build/helper.ts`	Added helper functions for component discovery and CSS injection plugin
`packages/component-library/package.json`	Added wildcard exports, sideEffects configuration, and size-limit tooling
`packages/component-library/.size-limit.ts`	Configured bundle size limits for main bundle and key components
`packages/admin-sdk/package.json`	Migrated from lodash to lodash-es dependency
`packages/admin-sdk/src/*/.ts`	Updated imports from lodash to lodash-es
`packages/admin-sdk/jest.config.js`	Added transformIgnorePatterns for lodash-es
`packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue`	Fixed CSS selector specificity
`.github/workflows/size-limit.yml`	Added CI workflow to validate bundle sizes
`packages/component-library/tsconfig.node.json`	Added build directory to includes
`packages/component-library/.gitignore`	Added build artifacts to ignore list

Files not reviewed (1)

pnpm-lock.yaml: Language not supported

Comments suppressed due to low confidence (2)

packages/component-library/vite.config.ts:9

Unused import Inspect.

import Inspect from "vite-plugin-inspect";

packages/component-library/vite.config.ts:14

Unused variable pkg.

const pkg = JSON.parse(fs.readFileSync(path.resolve(__dirname, "package.json"), "utf-8"));

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

packages/component-library/build/helper.ts

packages/component-library/.size-limit.ts

packages/component-library/package.json

packages/component-library/vite.config.ts

…function in helper.ts

…n build configuration

packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue

pkg-pr-new · 2025-12-09T14:35:22Z

Open in StackBlitz

@shopware-ag/meteor-admin-sdk

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-admin-sdk@979

@shopware-ag/meteor-component-library

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-component-library@979

@shopware-ag/meteor-icon-kit

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-icon-kit@979

@shopware-ag/meteor-prettier-config

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-prettier-config@979

@shopware-ag/stylelint-plugin-meteor

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/stylelint-plugin-meteor@979

@shopware-ag/meteor-tokens

npm i https://pkg.pr.new/shopware/meteor/@shopware-ag/meteor-tokens@979

commit: dddccfb

bojanrajh · 2025-12-30T11:48:33Z

packages/component-library/vite.config.ts

+      entry: {
+        index: path.resolve(__dirname, "src/index.ts"),
+        fonts: path.resolve(__dirname, "src/fonts.ts"),
+        ...allComponents,


@jleifeld @Haberkamp Something here seems like a breaking change (v4.23.0 works okay).

missing .maps

WARN Failed to load source map for /www/shopware/community-hub/node_modules/.pnpm/@shopware-ag+meteor-component-library@4.24.0_@codemirror+autocomplete@6.19.0_@codemirror+comm_vgdykszbymclx32issykq4ho6e/node_modules/@shopware-ag/meteor-component-library/dist/mt-datepicker.css. Error: An error occurred while trying to read the map file at main.css.map Error: ENOENT: no such file or directory, open '/www/shopware/community-hub/node_modules/.pnpm/@shopware-ag+meteor-component-library@4.24.0_@codemirror+autocomplete@6.19.0_@codemirror+comm_vgdykszbymclx32issykq4ho6e/node_modules/@shopware-ag/meteor-component-library/dist/main.css.map'

Related to externalizing vue-i18n - meteor uses "^9.9.1" which will be out of maintenance window in ... 🥁 ... 1 day :D Shopware uses 10.0.8, also out in 1 day.

Uncaught (in promise) SyntaxError: The requested module '/_nuxt/@fs/www/shopware/community-hub/node_modules/.pnpm/@intlify+core-base@11.2.7/node_modules/@intlify/core-base/dist/core-base.mjs?v=43652d33' does not provide an export named 'compileToFunction' (at vue-i18n.mjs:7:559)

■ Nuxt build error: RollupError: node_modules/.pnpm/vue-i18n@9.14.5_vue@3.5.26_typescript@5.9.3_/node_modules/vue-i18n/dist/vue-i18n.mjs (6:24): "incrementer" is not exported by "node_modules/.pnpm/@intlify+shared@10.0.8/node_modules/@intlify/shared/dist/shared.mjs", imported by "node_modules/.pnpm/vue-i18n@9.14.5_vue@3.5.26_typescript@5.9.3_/node_modules/vue-i18n/dist/vue-i18n.mjs". │ file: /www/shopware/community-hub/node_modules/.pnpm/vue-i18n@9.14.5_vue@3.5.26_typescript@5.9.3_/node_modules/vue-i18n/dist/vue-i18n.mjs:6:24

npm why vue-i18n

vue-i18n@9.14.5 node_modules/.pnpm/vue-i18n@9.14.5_vue@3.5.26_typescript@5.9.3_/node_modules/vue-i18n vue-i18n@9.14.5 node_modules/.pnpm/@shopware-ag+meteor-component-library@4.23.0_@codemirror+autocomplete@6.19.0_@codemirror+comm_kfwwtvppwyepxbvyiiecimveua/node_modules/vue-i18n vue-i18n@"^9.9.1" from @shopware-ag/meteor-component-library@4.23.0 node_modules/.pnpm/@shopware-ag+meteor-component-library@4.23.0_@codemirror+autocomplete@6.19.0_@codemirror+comm_kfwwtvppwyepxbvyiiecimveua/node_modules/@shopware-ag/meteor-component-library @shopware-ag/meteor-component-library@4.23.0 node_modules/@shopware-ag/meteor-component-library @shopware-ag/meteor-component-library@"4.23.0" from the root project

Didn't find a solution for this yet.

jleifeld self-assigned this Nov 26, 2025

feat: add CI job for package size checking

e58af9f

jleifeld force-pushed the improve-tree-shaking-behavior branch from 684ef42 to e58af9f Compare November 27, 2025 08:20

vercel bot deployed to Preview November 27, 2025 08:23 View deployment

refactor: improve tree shaking behavior

e3b1bf8

vercel bot deployed to Preview November 28, 2025 09:59 View deployment

vercel bot deployed to Preview November 28, 2025 15:42 View deployment

vercel bot deployed to Preview December 1, 2025 15:39 View deployment

improve d.ts generation path

f80f410

vercel bot deployed to Preview December 2, 2025 16:05 View deployment

chore: update size limits and external dependencies in component library

84e82d7

- Reduced size limits for various components in .size-limit.ts to optimize performance. - Refactored external package handling in vite.config.ts to streamline configuration.

vercel bot deployed to Preview December 3, 2025 09:02 View deployment

chore: migrate lodash to lodash-es and update dependencies to improve…

025bf19

… bundle size

vercel bot deployed to Preview December 3, 2025 16:02 View deployment

fix: correct CSS selector for mt-block-field in mt-checkbox component

939d2e6

vercel bot deployed to Preview December 4, 2025 13:26 View deployment

vercel bot deployed to Preview December 4, 2025 13:34 View deployment

chore: update Vite configuration to disable CSS minification for comp…

5f8a4f2

…onent library because the final application bundle will handle the whole minifcation

vercel bot deployed to Preview December 4, 2025 13:50 View deployment

jleifeld requested review from Haberkamp and alastair-simon December 4, 2025 13:57

refactor: remove unused CSS injection code from helper.ts and update …

7bda4c7

…icon import path in mt-icon.vue

vercel bot deployed to Preview December 4, 2025 13:59 View deployment

jleifeld requested a review from Copilot December 4, 2025 14:06

Copilot started reviewing on behalf of jleifeld December 4, 2025 14:07 View session

Copilot finished reviewing on behalf of jleifeld December 4, 2025 14:09

Copilot AI reviewed Dec 4, 2025

View reviewed changes

refactor: streamline Vite configuration and consolidate toPascalCase …

cc66d77

…function in helper.ts

vercel bot deployed to Preview December 4, 2025 14:18 View deployment

refactor: update libInjectCss function to conditionally apply based o…

d5fbc0b

…n build configuration

vercel bot deployed to Preview December 4, 2025 15:50 View deployment

refactor: code formatting

dddccfb

vercel bot deployed to Preview December 9, 2025 07:57 View deployment

alastair-simon reviewed Dec 9, 2025

View reviewed changes

packages/component-library/src/components/form/mt-checkbox/mt-checkbox.vue Show resolved Hide resolved

alastair-simon approved these changes Dec 9, 2025

View reviewed changes

Haberkamp approved these changes Dec 9, 2025

View reviewed changes

jleifeld marked this pull request as ready for review December 9, 2025 15:21

jleifeld enabled auto-merge (squash) December 9, 2025 15:21

Merge branch 'main' into improve-tree-shaking-behavior

5f3c2ea

vercel bot deployed to Preview December 9, 2025 15:23 View deployment

jleifeld merged commit 0f9a318 into main Dec 9, 2025
9 checks passed

jleifeld deleted the improve-tree-shaking-behavior branch December 9, 2025 15:25

bojanrajh reviewed Dec 30, 2025

View reviewed changes

bojanrajh mentioned this pull request Dec 30, 2025

feat: upgrade vue-i18n to v10 #1016

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Improve tree shaking behavior #979

Improve tree shaking behavior #979

Uh oh!

jleifeld commented Nov 26, 2025 •

edited

Loading

Uh oh!

vercel bot commented Nov 26, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pkg-pr-new bot commented Dec 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

bojanrajh Dec 30, 2025 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Improve tree shaking behavior #979

Improve tree shaking behavior #979

Uh oh!

Conversation

jleifeld commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What?

Testing?

Current result:

TODO:

Uh oh!

vercel bot commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

pkg-pr-new bot commented Dec 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

bojanrajh Dec 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jleifeld commented Nov 26, 2025 •

edited

Loading

vercel bot commented Nov 26, 2025 •

edited

Loading

pkg-pr-new bot commented Dec 9, 2025 •

edited

Loading

bojanrajh Dec 30, 2025 •

edited

Loading