Tree Shaking ability in Vue

paritosh149 commented 6 years ago

What problem does this feature solve?

Tree shaking would help in reducing the output file size and improve overall performance.

What does the proposed API look like?

vue-cli-service build --optimize

LinusBorg commented 6 years ago

Webpack does tree shaking out of the box, I'm not sure what else you expect.

paritosh149 commented 6 years ago

I used latest vue-cli to create and build standard template app. Inside dist/js folder, the size of vendor.js is 120,162 bytes, unzipped. I might sound naive, but isn't this too much size for an app that simple. This query is because of Vue app's size comparison to Angular's Ivy project which achieved total size of its Hello World app to approx 10KB.

uoziod commented 6 years ago

@paritosh149, this is very good point. I really think this is something to consider in further development.

LinusBorg commented 6 years ago

Well, install webpack-bundle-analyzer and have a look for yourself to see what's going on. I don't know what you did your did not include in your build.

Also, a few notes:

Ivy's small footprint for helloworld is impressive, but since we never serve "helloWorld" to our customers, it's not a very good benchmark for anything. We should look at an app that includes stuff apps use in 99% of cases and see what size it compiles to then.
vue-core itsef is ~20kb gzipped, vue-cli can't do much about that. If your request was aimed to slim down the core itself with "tree shaking", you are asking in the wrong repository. What I can tell you is hat we will have a more modular approach for Vue 3 that minght enable some improvements in that direction.
vue-cli 3 includes some basic polyfills b default that apps will need in 99% of cases - that does increase bundle size

LinusBorg commented 6 years ago

Well, vue-core doesn't do/support any tree-shaking right now. We can surely discuss how that can be changed in the future, but as mentioned, that's not related to vue-cli.

And generally, comparing the output of a general-purpose app setup that includes a bunch of stuff to a highly-optimized build of a hello-world is comparing appels and oranges, even though I happily admit what Ivy does is impressive.

Akryum commented 6 years ago

Well, install webpack-bundle-analyzer and have a look for yourself to see what's going on.

You can use the webpack dashboard in the UI or use the --report argument with vue-cli-service build. No need to install anything.

bberneker-ikea commented 5 years ago

Even if vue cli doesn't provide the kind of tree shaking requested out of the box, does anyone have some resources they can share on how to do this through manual configuration of webpack? I have a project I'd like to reduce and don't mind a little extra configuration effort if I can just find an understandable guide.

LinusBorg commented 5 years ago

does anyone have some resources they can share on how to do this through manual configuration of webpack?

There's no way to achieve that with Vue 2, plain and simple.

Vue 3 will be designed with tree-shakability in mind.

bberneker-ikea commented 5 years ago

Perhaps my request is out of scope for this thread. What I'm asking for is not to tree shake vue itself, but the various modules and dependencies I am using in a project created using the vue cli. Can't I manually tweak webpack to tree shake my imports?

LinusBorg commented 5 years ago

That's really out of scope.

Come to our forum at forum.vuejs.org

paritosh149 commented 5 years ago

That's really out of scope.

Come to our forum at forurm.vuejs.org

Typo Correction -> the link is forum.vuejs.org

uptownhr commented 3 years ago

@LinusBorg I know you've closed this issue a while back, so I'm sorry for pinging you here. But I've tried searching google and the forum and wasn't able to find a follow up regarding this thread.

But I'd like to ask if "multiple export files" (not sure if this is the right word) would be supported. The question of tree shaking is when the output produced by vue-cli-service build can be tree shaken based on what is consumed by another project.

For example, I have a UI library that I've produced. In a target project, I've installed the UI library and only use a single component. Given the single main.js entrypoint, this results in the entire library being imported and built.

Given that vue-cli-service supports the wc mode and the vue-cli-service build --target wc --name foo 'src/components/*.vue' wildcard syntax, I'm suprised the library mode wouldn't also create builds the same way or an option to do so.

Not sure if closed issues will get to you but this would be awesome feature added to support component development.

vuejs / vue-cli

Tree Shaking ability in Vue #1644

What problem does this feature solve?

What does the proposed API look like?