Reduce number of files served by Vue

Viewed 288

This is my vue.config.js:

css: {
  extract: false,
},
configureWebpack: {
  devtool: 'source-map',
  optimization: {
    splitChunks: false,
  },
},
productionSourceMap: false,

But npm run build still produces tens of JS files of few kilobytes. What else can I do to minimize the number of HTTP requests?

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
app (2.2 MiB)
  js/app.e5ac77b2.js
File                                    Size          Gzipped
dist\js\app.e5ac77b2.js                2250.34 KiB   562.04 KiB
dist\js\chunk-541990f1.e9b5e7db.js     154.07 KiB    38.54 KiB
dist\js\chunk-8a5240ea.b13b16eb.js     58.31 KiB     13.01 KiB
dist\js\chunk-79115485.000b8594.js     54.09 KiB     12.16 KiB
dist\js\chunk-2d8840d2.d8fb7cdd.js     52.23 KiB     17.08 KiB
dist\js\chunk-a46b9702.9332655c.js     14.74 KiB     3.91 KiB
dist\js\chunk-64a448f1.15ddc97d.js     14.63 KiB     5.44 KiB
dist\js\chunk-fc92b6b4.7852b6f1.js     12.81 KiB     3.15 KiB
dist\js\chunk-5ecb5826.0e4e376c.js     12.20 KiB     3.34 KiB
dist\js\chunk-b2c2b794.200aebb8.js     11.86 KiB     3.34 KiB
dist\js\chunk-60399209.95b17807.js     11.69 KiB     3.31 KiB
dist\js\chunk-f90e518c.c494a76d.js     9.38 KiB      2.93 KiB
dist\js\chunk-2425c6ee.ba0818a2.js     9.09 KiB      2.85 KiB
dist\js\chunk-15cc07c8.4da16bb8.js     8.14 KiB      2.82 KiB
dist\precache-manifest.fa029155.js     6.66 KiB      2.29 KiB
dist\js\chunk-10e0a56e.d0582280.js     5.62 KiB      2.12 KiB
dist\js\chunk-a07c36b4.5682607a.js     5.51 KiB      2.11 KiB
dist\js\chunk-86d6859e.c93925fe.js     5.43 KiB      2.11 KiB
dist\js\chunk-2d0c4be9.c2504fb3.js     3.04 KiB      1.21 KiB
dist\js\chunk-2d21009c.74c0b513.js     2.82 KiB      1.18 KiB
dist\js\chunk-2c31d1d1.5121e525.js     2.00 KiB      1.04 KiB
dist\js\chunk-2d0dd4f9.e25470f7.js     1.31 KiB      0.68 KiB
dist\service-worker.js                 0.95 KiB      0.54 KiB
dist\js\chunk-2d0f07c5.e1096318.js     0.87 KiB      0.55 KiB
dist\js\chunk-2d0e523f.2a1a17be.js     0.57 KiB      0.38 KiB
1 Answers

Problem is not in your vue.config.js but in router.js

You are using async components (component: () => import('./views/user/SignUp.vue') for example) ....each import() will create new js chunk

You can fine tune Webpack code splitting with magic comments - for example pack all "user" components/routtes into single chunk:

component: () => import(/* webpackChunkName: "user-chunk" */ './views/user/SignUp.vue')

...use same comment with all "user" sub-route components

Related