Vue-loader: Wepback tree-shaking and vue-components package

Created on 1 Nov 2017 · 9Comments · Source: vuejs/vue-loader

Version

13.3.0

Reproduction link

https://github.com/qiyuan-wang/vue-tree-shaking-example

Steps to reproduce

I have a package, named like 'Cards', including several vue components, its structure is likes:

| - components
  | - NoteCard.vue
  | - ItemCard.vue
  | - UserCard.vue
| - index.js
| - package.json

I exports all components in the index.js file.

So, I can use those components in my business package:

<template>
  <div>
    <note-card />
  </div>
</template>
<script>
  import { NoteCard } from 'cards'

  export default {
   ...
  }
</script>

I use webpack for bundling and I try to use the feature ‘Tree shaking’.

I thought the output bundle would contain the components I import in my business package. For example, it would contain NoteCard only for the codes above.

But the reality is, all components would be in the bundle, that makes the bundle size huge.

So, my question is, what makes ‘tree-shaking’ not work?

What is expected?

Codes from temCard and UserCard should not be included in the output bundle.

What is actually happening?

Codes from temCard and UserCard are included in the output bundle.

Source

qiyuan-wang

👍4

Most helpful comment

@qiyuan-wang Have you solved the problem? We got the same.

rainfore on 18 Dec 2017

👍3

All 9 comments

You need to add in the uglifyJSPlugin minifier plugin in your webpack config to shake out the unused "dead" code.

https://webpack.js.org/guides/tree-shaking/

Note that depending on how the code is written, it might not be able to shake out all unused code.

tmorehouse on 1 Nov 2017

@tmorehouse I use vue-cli to generate the example project, and you can check its webpack.prod.conf.js, it already includes settings for uglifyJSPlugin.

qiyuan-wang on 1 Nov 2017

This is a webpack usage question. Note in webpack tree-shaking is opt-in via ModuleConcatenationPlugin.

yyx990803 on 3 Nov 2017

@qiyuan-wang Have you solved the problem? We got the same.

rainfore on 18 Dec 2017

👍3

@rainfore I issued same question to webpack team, and got the anwser from @sokra.

According to his reply, it's caused by The ESM spec.

Hopefully,

webpack 4 will come with a new feature to opt-in into non-spec-comform behavior that can eliminate these reexports.

webpack has released 4-alpha version recently, I'll give a try under it.

And in pratice, we found a workaround for this problem:

import the target module from package by relative path, like import NoteCard from 'cards/components/NoteCard'. This would make your bundle only include NoteCard module.

But it has a flaw: if you import same module in different packages using by your project, there would be multiple copies of it in your bundle.

We still search for better solution of it.

qiyuan-wang on 28 Dec 2017

I had the same problem. I tried configuring the uglifyJSPlugin plug-in. But it didn't work

zxb5102 on 24 Mar 2018

This has come up before, have you tried naming your exports instead of export default {...}. I believe you need named exports for tree shaking to work properly.