Продавцы. js имеет большой размер файла при сборке - PullRequest
Новая
       5

Продавцы. js имеет большой размер файла при сборке

0 голосов
/ 22 марта 2020

Я запустил проект с Nuxt. js, используя npx nuxt-create-app и добавив следующее при появлении запроса:

  • Vuetify. js
  • Ax ios
  • PWA

После завершения команды я запустил npm run generate и получил следующий вывод: 

Version: webpack 4.42.0
Time: 50481ms
Built at: 03/22/2020 3:50:44 AM
                         Asset       Size  Chunks                                Chunk Names
../server/client.manifest.json     14 KiB          [emitted]
       347edfc8c71f21607d82.js   19.3 KiB       2  [emitted] [immutable]         pages_index
       36edf39aed940985958a.js    169 KiB       1  [emitted] [immutable]         commons.app
       8a4f26db9171c6d3e52c.js    4.3 KiB       6  [emitted] [immutable]
       955eec4fff786128890e.js   2.35 KiB       4  [emitted] [immutable]         runtime
                      LICENSES  389 bytes          [emitted]
       a8167919c00ee96e3ace.js  817 bytes       3  [emitted] [immutable]         pages_inspire
       b80f759242c3c8480088.js    405 KiB       5  [emitted] [immutable]  [big]  vendors.app
       b8dd601015ecae11904a.js     49 KiB       0  [emitted] [immutable]         app
     icons/icon_120.5f6a36.png   4.68 KiB          [emitted]
     icons/icon_144.5f6a36.png    5.8 KiB          [emitted]
     icons/icon_152.5f6a36.png    6.1 KiB          [emitted]
     icons/icon_192.5f6a36.png   7.83 KiB          [emitted]
     icons/icon_384.5f6a36.png   18.1 KiB          [emitted]
     icons/icon_512.5f6a36.png     20 KiB          [emitted]
      icons/icon_64.5f6a36.png   2.35 KiB          [emitted]
        manifest.47b2f596.json  810 bytes          [emitted]
 + 2 hidden assets
Entrypoint app = 955eec4fff786128890e.js 36edf39aed940985958a.js b80f759242c3c8480088.js b8dd601015ecae11904a.js

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  b80f759242c3c8480088.js (405 KiB)

Я изменил nuxt.conf.js, чтобы разделить файлы: 

  build: {
    /*
    ** You can extend webpack config here
    */

   analyze: true,
    extend (config, {isClient}) {
      if (isClient){
        config.optimization.splitChunks.maxSize = 200000;
      }
    }
  }

Но что мне интересно, так это

  1. Разве клиенту все равно не придется загружать общий размер файла, даже если файлы меньше? Так как же помогает разделение кода?
  2. Что я могу сделать, кроме разделения кода, чтобы уменьшить общий размер, так как это всего лишь каркас моего проекта, и он уже такой большой?

1 Ответ

1 голос
/ 22 марта 2020

Внедрение этих двух схем значительно уменьшит время загрузки.

Предложения:

  1. Сокращение и сжатие пакетов с помощью сжатия gzip / brotli , Это резко уменьшит размер пакета. ( оформить заказ )

  2. Разделение кода на основе маршрутов / компонентов (я использовал это в проектах React)

Ответы:

  1. Да. но если вы сжимаете его и его код разделяется, он выбирается только тогда, когда это требуется.
  2. Чтение Предложение 1 .
...