5

I have created an app using Vue CLI 3, I have been watching the build and it warned me there are large files:

$ vue-cli-service build --modern --mode production --dest dist --target app --dashboard


-  Building legacy bundle for production...

 WARNING  Compiled with 2 warnings12:40:54 PM


 warning  

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  js/chunk-vendors-legacy.443e5f8f.js (1.44 MiB)

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.46 MiB)
      js/chunk-vendors-legacy.443e5f8f.js
      js/app-legacy.4b3e4352.js

I have no idea how to reduce this file size, it comes completely from external libs:

lib sizes

I assumed it could not be gotten rid of. Just today I did the "Coverage" tool in chrome and it shows that its mostly unused. How do I get rid of this unused code to make my app load faster?

I am already gzipping, my question is more about how to actually make those files tree-shake to drop in file size.

unused code

Colton Scottie
  • 807
  • 1
  • 8
  • 22
  • there are several steps you can do to make your build smaller. First you should check all the dependencies that you are importing, so you really need them... for example dont import some libary just to use one function from it. Second check size of each libary and if it is too big google for smaller alternative. For example dont use moment.js but use date-fns as it is much smaller. Then you try to tree shake and also do lazy loading and code spliting:https://vuejsdevelopers.com/2017/07/08/vue-js-3-ways-code-splitting-webpack/?utm_source=linkedin-page-vjd&utm_medium=newsletter&utm_campaign=csp – Mladen Skrbic Aug 02 '19 at 12:30
  • From image that you provided i see that main issue for you is that you are using too much external libaries ... chunk-vendor.js is for dependencies – Mladen Skrbic Aug 02 '19 at 12:32
  • u need to tree shake it, but not all libaries provide that feature, but if they do you can usually find in docs – Mladen Skrbic Aug 02 '19 at 12:33
  • @MladenSkrbic I need all those libraries, well parts of them. The question is not that I need to tree shake or not, I know I need to, question is how. – Colton Scottie Aug 02 '19 at 13:47
  • The answer of "how" depends on the library but usually, e.g. for Lodash you can replace `import lodash from "lodash"` with `import map from "lodash/map"`. You can read https://www.azavea.com/blog/2019/03/07/lessons-on-tree-shaking-lodash/ for more information. – IVO GELOV Aug 02 '19 at 13:53

0 Answers0