vuejs / vuejs/docs

CustomElements library bundle size is significantly larger than the docs state.

Open
#3,056 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Vue
Stars
3.2k
Forks
5k
Avg merge
14d 17h
Merged PRs (30d)
1

Description

Here's what it says in the docs:

When building custom elements with Vue, the elements will rely on Vue's runtime. There is a ~16kb baseline size cost depending on how many features are being used.

In my local environment I was getting a bundle a lot larger than that, even though there wasn't a whole lot happening in the actual library code, so I got suspicious about that number in the docs.

So I've created a minimal sample project on stackblitz to test my theory. Which is barebones Vite + only 2 empty Vue components building as a custom elements library - and they're literally empty, just a single <div /> in each of them.

And here's what it builds:

dist/output.js  150.92 kB │ gzip: 46.35 kB 
dist/output.umd.cjs  101.04 kB │ gzip: 37.39 kB

That's a bit more than 16 kb, even compressed. Maybe we should modify the docs because that looks misleading.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked Custom Elements library documentation and reproduce the linked StackBlitz sample using src/main.js, vite.config.js, and the two component files. Compare the reported bundle sizes with the documented baseline; done means the documentation accurately explains the expected size or is updated to address the discrepancy.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
documentation
Issue type
Documentation
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.