How to troubleshoot a large vendor file?

[ffxsam]

My production build is a bit heavy:

              Chunk Names
                 static/fonts/element-icons.6f0a763.ttf      11 kB          [emitted]
               static/js/vendor.dd83b1b8e4fd1abaaa41.js    3.19 MB       0  [emitted]  [big]  vendor

What's the best way to tell which 3rd party packages are contributing to this heft?

[LinusBorg]

Running npm run build --report

It will open a visualization of all the created bundles/chunks and their contents

[ffxsam]

Strange, nothing looks different when using the --report option.

$ node build/build.js --report
Hash: 71e8ffbde3298002398b
Version: webpack 3.10.0
Time: 52278ms
                                                  Asset       Size  Chunks                    Chunk Names
                 static/fonts/element-icons.6f0a763.ttf      11 kB          [emitted]
               static/js/vendor.dd83b1b8e4fd1abaaa41.js    3.19 MB       0  [emitted]  [big]  vendor
                  static/js/app.92cc43da3cf31fe269ca.js     110 kB       1  [emitted]         app
             static/js/manifest.7eef0b956dce90643db8.js    1.49 kB       2  [emitted]         manifest
    static/css/app.a6da45ff8c50029eb04cd5330fee1139.css     232 kB       1  [emitted]         app
static/css/app.a6da45ff8c50029eb04cd5330fee1139.css.map    1.25 MB          [emitted]
           static/js/vendor.dd83b1b8e4fd1abaaa41.js.map    8.53 MB       0  [emitted]         vendor
              static/js/app.92cc43da3cf31fe269ca.js.map     337 kB       1  [emitted]         app
         static/js/manifest.7eef0b956dce90643db8.js.map    7.79 kB       2  [emitted]         manifest
                                             index.html  621 bytes          [emitted]

  Build complete.

  Tip: built files are meant to be served over an HTTP server.
  Opening index.html over file:// won't work.

✨  Done in 53.97s.

[ffxsam]

Oh, strange. It doesn't work with yarn, but only works with npm. That seems wrong.

[ffxsam]

@LinusBorg You closed this issue without any further comments. Just curious, are there plans to address this so it works with yarn?

[LinusBorg]

That was a fat finger mistake. Can you rpovide a bit more info, what does "does not work" mean? I can't work on this right now and others might, if the input was more explicit.

[ffxsam]

Sure. It's just that if you run yarn build --report, it does a regular build and doesn't seem to see the --report option.

[LinusBorg]

Hm, that's because it relies on a special npm env car being set when it receives --report

[ricky11]

Has the large build got some something to do with the map file which is use by devtools to kinda un-minify js code. my vendor.js file is 1.49MB and it consits of firebase and vuex vue-router. this is angular size level!

[LinusBorg]

Firebase is more than 710kb minified, that's half of your bundle right there!

Vue+vuex+router is <100kB minified, so the rest of your bundle must be made up by something else.

The map file has nothing to do with bundle-size, no.

So use the bundle analyzer to find out what yiur. Bundle is made up of

[baloodevil]

Like @ffxsam my chunk-vendors.abc.js is too large. Running npm run build --report just shows the various javascript files with their size (where chunk-vendors.abc.js is just one entry). I think the question is how to analyze what contributed to the size of what is in one of the javascript bundles. That question is more specific to webpack than vue. And for that, webpack-bundle-analyzer could help.

[cybercussion]

So some feedback. I'm very new to Vue and I'm using TypeScript to boot but I found command vue ui in the CLI which will launch a handy web app. I navigated (after project import) to Tasks, Build, then Analyzer. This allowed me to pick the file, and get a breakdown of what's in it.

This lead to some other fun like "Why when I import BDropdown from Bootstrap-vue I get the entire Bootstrap-vue 113KB??" and etc etc ... but least its a start visually.

Hope it helps.

[njwest]

@cybercussion Thanks for the share -- was unaware of this feature

Also, re: Bootstrap-vue, the whole thing is 282kb:

so maybe BDropdown just invokes a whole lot of sub-components :P

[bagaskarala]

my build size, soo large, what should i do?

[Chris2011]

The question for me here is, how can we split the chunk-vendors file into smaller peaces? I mean if you need firebase or vuetify or fontawesome or bootstrap and you already optimized it while using the right imports for treeshaking, how can we optimize it more? Removing is not an option, only splitting, what else?

[Chris2011]

But can we split the chunk-vendor.js file into pieces?

[Chris2011]

Ahh ok, didn't know that. It is possible with:

configureWebpack:{
    optimization: {
      splitChunks: {
        minSize: 10000,
        maxSize: 250000,
      }
    }
  }

Got the info from here: https://stackoverflow.com/questions/51816020/how-to-break-the-js-files-into-chunks-in-vue-cli-3-with-webpack-performance-obje