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

Web component - Benchmark #9279

Closed
vogloblinsky opened this Issue Jan 4, 2019 · 3 comments

Comments

Projects
None yet
3 participants
@vogloblinsky
Copy link

vogloblinsky commented Jan 4, 2019

Hi,

I have created a benchmark suite for Web Components librairies. Vue.js is implemented with his web component target feature, and you can see the raw results here : https://vogloblinsky.github.io/web-components-benchmark/

I will release soon a blog post explaining in detail that, but i want a feedback of many librairies authors before, to be sure i am not wrong in my implementations.

Source code here : https://github.com/vogloblinsky/web-components-benchmark

Can you have a look and give me some feedbacks ?

Thanks

@vue-bot

This comment has been minimized.

Copy link
Contributor

vue-bot commented Jan 4, 2019

Hello, your issue has been closed because it does not conform to our issue requirements. In order to ensure every issue provides the necessary information for us to investigate, we require the use of the Issue Helper when creating new issues. Thank you!

@vue-bot vue-bot closed this Jan 4, 2019

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Jan 4, 2019

Some feedback:

  • Use vue.runtime.min.js - built web components don't need the compiler at runtime. This saves around 10kb payload size.

  • Use export default instead of module.exports. The latter bails out of module concatenation.

  • Building one component file for each component in an app is not the intended usage: all the common modules used by the components will be duplicated, including the webpack wrapper, css injection runtime, etc... this significantly bloats the bundle. Unless you want each component inside your app to be usable standalone, it's pretty pointless to do it like this (also makes the build scripts more complex, the bundle bigger and slower...)

  • Suggested usage: write the Vue app exactly how you'd write it as a normal Vue app (importing child components) and build a single web component for the entire app.

  • If you really insist on having each component being a real custom element (which I think is wc-for-wcs-sake), do a multi-web-component bundle instead.

@yyx990803

This comment has been minimized.

Copy link
Member

yyx990803 commented Jan 4, 2019

BTW, some implementations (e.g. Riot.js) isn't actually exporting native web components...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment