search

arielsalminen / vue-design-system

An open source tool for building UI Design Systems with Vue.js
https://vueds.com
MIT License
2.17k stars 224 forks source link

[Webpack Warning] Entrypoint size limit #111

Open phaust opened 5 years ago

phaust commented 5 years ago

Hi!

I'm using VueDS for quite a while now and it gives me a nice overview of all my components. More and more tokens, elements, patterns etc. are being implemented and brought into the design system. So far, I ignored the webpack warning on the system build process saying: WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Now, I would like to split the bundle into smaller parts. How could this be accomplished?

arielsalminen commented 5 years ago

@phaust I guess you’d have to configure Webpack to do that for you (current configuration just makes one big bundle as that’s the easiest thing to do). I added a roadmap tag here since I think this should probably also be a feature on Vue Design System side and at least provide an option to split the code somehow.

sdellis commented 5 years ago

@phaust We ran into that as well when we tried to add a bunch of svg icons. We were able to disable the warning, but it was a few months ago (permitting us to make larger builds) but I can't seem to find that webpack config option now. We had to minimize our svg icon use to keep the bundle as skinny as possible, so we are looking for solutions for having a rich set of icons without performance issues related to bundling them.

I agree with @viljamis that this is a valuable next step for VueDS. We were planning to implement either codesplitting or treeshaking in our fork in the next month or two, so perhaps I can help with this. Here's a detailed tutorial on codesplitting for Vue.js and Webpack.

From the articles, it seems that tree-shaking may be easier to configure, but from an end-user (developer using the design system) standpoint, codesplitting would be easier because they don't have to know/care which components the app is using since all components are loaded dynamically, as needed.

phaust commented 5 years ago

@phaust I guess you’d have to configure Webpack to do that for you (current configuration just makes one big bundle as that’s the easiest thing to do). I added a roadmap tag here since I think this should probably also be a feature on Vue Design System side and at least provide an option to split the code somehow.

Thx, it would be great if that would become an official feature.

arielsalminen commented 5 years ago

@sdellis @phaust I’m very much interested to talk more about this and make it an official feature. I haven’t dived deep into this subject yet, so need to do some reading first about the best practices to understand what would be the best approach while also keeping it easy to import and use the system in multiple projects.

arielsalminen commented 5 years ago

@phaust I’m happy to tell you that I’ve optimized the system build now so that the default build came down from 106kb to 16.1kb, see release notes: https://github.com/viljamis/vue-design-system/releases/tag/3.5.2