Блог

Это мой vue.config.js:

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

Но npm run build по-прежнему создает десятки файлов JS размером в несколько килобайт. Что еще я могу сделать, чтобы минимизировать количество HTTP-запросов?

 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
distjsapp.e5ac77b2.js                2250.34 KiB   562.04 KiB
distjschunk-541990f1.e9b5e7db.js     154.07 KiB    38.54 KiB
distjschunk-8a5240ea.b13b16eb.js     58.31 KiB     13.01 KiB
distjschunk-79115485.000b8594.js     54.09 KiB     12.16 KiB
distjschunk-2d8840d2.d8fb7cdd.js     52.23 KiB     17.08 KiB
distjschunk-a46b9702.9332655c.js     14.74 KiB     3.91 KiB
distjschunk-64a448f1.15ddc97d.js     14.63 KiB     5.44 KiB
distjschunk-fc92b6b4.7852b6f1.js     12.81 KiB     3.15 KiB
distjschunk-5ecb5826.0e4e376c.js     12.20 KiB     3.34 KiB
distjschunk-b2c2b794.200aebb8.js     11.86 KiB     3.34 KiB
distjschunk-60399209.95b17807.js     11.69 KiB     3.31 KiB
distjschunk-f90e518c.c494a76d.js     9.38 KiB      2.93 KiB
distjschunk-2425c6ee.ba0818a2.js     9.09 KiB      2.85 KiB
distjschunk-15cc07c8.4da16bb8.js     8.14 KiB      2.82 KiB
distprecache-manifest.fa029155.js     6.66 KiB      2.29 KiB
distjschunk-10e0a56e.d0582280.js     5.62 KiB      2.12 KiB
distjschunk-a07c36b4.5682607a.js     5.51 KiB      2.11 KiB
distjschunk-86d6859e.c93925fe.js     5.43 KiB      2.11 KiB
distjschunk-2d0c4be9.c2504fb3.js     3.04 KiB      1.21 KiB
distjschunk-2d21009c.74c0b513.js     2.82 KiB      1.18 KiB
distjschunk-2c31d1d1.5121e525.js     2.00 KiB      1.04 KiB
distjschunk-2d0dd4f9.e25470f7.js     1.31 KiB      0.68 KiB
distservice-worker.js                 0.95 KiB      0.54 KiB
distjschunk-2d0f07c5.e1096318.js     0.87 KiB      0.55 KiB
distjschunk-2d0e523f.2a1a17be.js     0.57 KiB      0.38 KiB
  

Проблема не в вашем vue.config.js , а в router.js

Вы используете асинхронные компоненты ( component: () => import('./views/user/SignUp.vue') например) …. каждый import() создаст новый фрагмент js

Вы можете точно настроить разделение кода Webpack с помощью волшебных комментариев — например, упаковать все «пользовательские» компоненты / маршруты в один фрагмент:

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

  

…используйте один и тот же комментарий со всеми компонентами «пользовательского» подпрограммы