DLL mode bundle sizes

Version

3.0.0-beta.6

Reproduction link

https://codesandbox.io/s/ppo0y403lj

Steps to reproduce

Enable DLL mode by setting the dll option in vue.config.js to true (as per docs):

// vue.config.js
module.exports = {
  dll: true
}

What is expected?

Vendor libs not to be included in app bundle; bundle sizes to be reduced.

What is actually happening?

With the option set to true, some node_modules are packaged into the app bundle – the opposite of a build with the option disabled, and hence the opposite of the option’s function described by the documentation.

Comparison of build sizes given the following base project set-up:

vue create -i '{"plugins": { "@vue/cli-plugin-babel": {} }, "router": true, "vuex": true}' my-project

dll: false (the default):

  File                          Size                   Gzipped

  dist/js/vendor.456df753.js    95.01 kb               32.36 kb
  dist/js/app.be870e84.js       12.51 kb               8.05 kb
  dist/css/app.8b290d57.css     0.42 kb                0.26 kb

  Images and other types of assets omitted.

dll: true:

  File                          Size                   Gzipped

  dist/js/vendor.3884c493.js    95.12 kb               32.29 kb
  dist/js/app.d8cf8ae4.js       13.89 kb               8.71 kb
  dist/css/app.8b290d57.css     0.42 kb                0.26 kb

  Images and other types of assets omitted.

The difference is exacerbated as projects grow.

---

Is this condition the opposite of what it should be?

Unless I’m mistaken in how this feature should work, the consequence of changing/fixing this will be that all vue-cli generated apps’ bundle sizes will subsequently increase, except those where the option has already been set to true in the anticipation it would reduce bundle sizes (which it isn’t currently), in which case future builds will be smaller 😃

[yyx990803]

So, DLL mode is in fact meant for production builds. It is only for projects that are so big that builds can take minutes.

The reason for DLL builds having a bigger size is probably because DLL vendor bundle includes all dependencies listed in package.json without tree-shaking. So, this is a tradeoff that the user has to make on their own - sacrificing bundle size for a faster build, or the other way around. This may also has something to do with auto-dll-webpack-plugin, which is used in producing the DLL bundle.

I think we should probably mark DLL mode as experimental for now.

[Akryum]

I have a bunch of code I use at work: https://gist.github.com/Akryum/53da1c59775cdb4beace2f6189b40205 Maybe it can be useful.