Vendor.js bundle is 1.5 mb already. How to reduce it ?

[ibudisteanu]

I am using the Vue hackernews as a boilerplate for a project. I just realized the vendor.js bundle size is over 1.5 mb in total it contains many packages that the browser doesn't need like "mime-db", "bn.js" (big number), "bluebird.js", "tweetnacl", "elliptic", etc. Some of them are used by the express which is used only on the server side, but most of the packages are included to the browser vendor.js bundle.

I installed the Webpack bundle analyzer and I saw there are so many redundancies as well. Any help to remove them out from the vue-hackernews 2.0 boilerplate.

[ibudisteanu]

I was able to reduce the entire chunks including vendor.js to 1.5 mb

But still, the vendor.js file has 1.4 mb and I have no clue why? Any explanation with mime-db and mime-type is required in frontend ?

[sirlancelot]

I suspect several of those are deep dependencies of the firebase module, probably?

[ibudisteanu]

Hi Thanks! I checked for Firebase. My code doesn't use firebase. I searched throughout all the files. Firebase was also removed from the package.json dependencies.

I can only see that firebase is indeed installed and shown in the yarn.lock but otherwise, my code doesn't use firebase anymore.

[sirlancelot]

Also keep in mind Webpack's tree-shaking only applies to production bundles. It's not perfect, but it should cut down on the bloat significantly.

This repository is also incredibly outdated, there's new versions of almost every dependency, including Webpack. I suggest taking this discussion to a more appropriate venue, such as Discord or Forum.

[ibudisteanu]

Today I decided to take another look at this issue. It seems it was my fault by installing request-promise npm. That library alone is over 1 MB. After I replaced request-promise with node-fetch, I got less than 380kb in total.