Как уменьшить vue js размер сборки с vuetify? - PullRequest
Новая
       25

Как уменьшить vue js размер сборки с vuetify?

0 голосов
/ 26 апреля 2020

Я создал проект с использованием vue -cli, добавил vuetify и vuetify-loader, и окончательный размер сборки в рабочем режиме получается большим, как если бы все компоненты vuetify были импортированы. Как уменьшить объем производства?

UPD: я новичок в vue js и пока мало знаю об этом. Я где-то читал, что Vuetify-loader анализирует используемые компоненты и соединяет их, чтобы уменьшить размер сборки, но это не работает для меня, даже без компонентов размер сборки велик. Вот вывод npm run build: 

/  Building for production...

 WARNING  Compiled with 1 warnings                                                                                                                                                                      

 warning  

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.

Entrypoints:
  app (472 KiB)
      css/chunk-vendors.bc54f729.css
      js/chunk-vendors.97235f99.js
      js/app.46f6da66.js

  File                                      Size             Gzipped

  dist\js\chunk-vendors.97235f99.js         228.10 KiB       76.89 KiB
  dist\js\app.46f6da66.js                   4.29 KiB         2.05 KiB
  dist\service-worker.js                    1.04 KiB         0.61 KiB
  dist\precache-manifest.9058d5d1f866160    0.76 KiB         0.35 KiB
  7d10739d8c19d6d73.js
  dist\js\about.de05c083.js                 0.40 KiB         0.28 KiB
  dist\css\chunk-vendors.bc54f729.css       239.39 KiB       25.81 KiB

1 Ответ

0 голосов
/ 26 апреля 2020

Итак, хорошая новость в том, что вы уже импортируете Vuetify в режиме а-ля-карт . Это означает, что функции веб-упаковки, работающие на дереве, импортируют только те компоненты Vuetify, которые вы используете. Плохая новость заключается в том, что вы, вероятно, не сможете уменьшить размер пакета намного больше, чем это, но я бы не стал слишком беспокоиться, просто пока.

Если только пользователи вашего приложения не будут на ОЧЕНЬ медленных соединениях (например, на границе мобильной связи или коммутируемом соединении) они по-прежнему могут видеть время загрузки менее 1 с. Даже 3G-соединения должны загружаться за 3-4 секунды. Вот выходные данные команды vue run build в пользовательском интерфейсе Vue для проекта, недавно созданного с помощью Vue CLI, т.е. vue create myapp, за которым следует vue use vuetify:

imagevue run build command in Vue UI">

Предупреждения о размере сборки из Vue CLI выглядят пугающе, но в основном они хотят, чтобы вы обратили внимание на пользователей, которые очень медленно подключаются.

Для дальнейшего сравнения, если бы вы НЕ использовали Vuetify в режиме «а-ля-карт» (тряска деревьев), ваш размер сборки для того же проекта будет выглядеть следующим образом: 


Webpack Bundle Analyzer saved report to /Volumes/ClownCar/bentonmc/dev/playground-vuetify/dist/report.html
  File                                      Size             Gzipped

  dist/js/chunk-vendors.572394a1.js         964.61 KiB       227.31 KiB
  dist/js/app.612913d1.js                   8.41 KiB         3.35 KiB
  dist/service-worker.js                    1.05 KiB         0.61 KiB
  dist/precache-manifest.e297dd70e114a19    0.86 KiB         0.38 KiB
  dd9cc2b302d4a78ec.js
  dist/js/about.7c7cb591.js                 0.44 KiB         0.31 KiB
  dist/css/chunk-vendors.173d6f78.css       35.10 KiB        5.86 KiB

Таким образом, вы можете видеть что при включенной функции встряхивания дерева размер вашей сборки составляет всего одну треть от того, что было бы без него.

Очень хорошо заботиться о размере пакета, и по возможности вам следует ленивый загрузить компоненты . Пользователям все равно придется в конечном итоге загружать компоненты, но этот метод может значительно уменьшить размер основного пакета и позволить компонентам, не видимым на домашней странице, загружаться в фоновом режиме.

Однако вы не можете загружать свои ленивые файлы. Из-за этого основной макет приложения (т. е. тот, который использует <v-app>), и поэтому размер вашего комплекта должен быть больше рекомендованного целевого размера Vue. Довольно сложно создать быстрые, современные веб-приложения и уменьшить размер пакета до размеров, которые хорошо работают даже при самых медленных соединениях. Тем не менее, я считаю, что выгода от использования такой среды, как Vuetify, полностью стоит того.

...