Многостраничная конфигурация Vue-Cli3 и оптимизация сборки во время компиляции

Vue.js

Введение

Содержание, представленное в этой статье, включает в себя:

  1. Как использовать vue-cli3 для многостраничной настройки и построения и возникающие проблемы;
  2. комбинироватьsplitChunksРазделение общих блоков кода для оптимизации производительности загрузки во время выполнения;
  3. комбинироватьdllPluginПредварительная сборка общих блоков кода для оптимизации скорости сборки во время компиляции.
  4. комбинироватьwebpack-bundle-analyzerвыходной отчет о сборке
  5. Настройка междоменного прокси

Скачать демоверсию

Во-вторых, строительный эффект

2.1. Описание каталога приложений

В проекте естьnew_years_festivalа такжеspring_festivalдве страницы,index.jsдля файла входа страницы (обязательно),config.jsonНастройте файл для нескольких страниц (обязательно).

2.2 Строительный эффект до оптимизации

иллюстрировать:
А. Общие для обеих страниц сторонние библиотеки упакованы вchunk-vendors.jsфайл,Чем больше библиотек и страниц, тем крупнее будет производитель.
b. new_years_festivalСторонние библиотеки, на которые ссылается страница,vue,spring_festivalСторонние библиотеки, на которые ссылается страница,vueа такжеvue-router.

2.3 Эффект сборки после оптимизации

иллюстрировать:
А. Настроитьchunk-vendorСтратегия упаковки , блоки кода, на которые обычно ссылаются две страницы, упаковываются вchunk-common.js
b.spring_festivalСторонняя библиотека вspring-festival-vendor.js, что примерноvue-routerсодержание (вы можете решить, следует ли извлекать или нет в соответствии с вашими потребностями).

2.4 Эффект предварительной сборки dllPlugin

иллюстрировать:vendor.dll.jsВключить сторонние библиотекиvue.jsи собственная публичная библиотекаutils.js

3. Начать

Если не указано иное, следующиеvue.config.jsконфигурация в

3.1 Многостраничная конфигурация

3.3 Стратегия разделения кода Splitchunks

3.4 Готовая конфигурация dllPlugin

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

а. Сначала определитеwebpack.dll.config.js, содержание в основном то же самое, поэтому я больше не буду его выкладывать
б. Далее вvue.config.jsплюс конфигурация

3.5 анализатор генерирует отчет о сборке

а. вvue.config.jsнастроить

б.package.jsonОпределить команды скрипта в

 "scripts": {
    "analyze": "ANALYZE=true vue-cli-service build"
  },

в) выполнитьnpm run analyzeи посетитьlocalhost:8888Только что

3.6 Междоменный прокси

Предположим, что интерфейсный сервисный порт4000, целевой интерфейсhttp://localhost:300/api/get_info, доступ после установки проксиhttp://localhost:4000/api/get_infoВот и все.

4. Вывод

  1. Полная демонстрацияскачать

  2. Столкнулся с проблемой на практике многостраничного процесса: вvue.config.jsСредняя конфигурацияpublicPathКогда поле выдает ошибку:ERROR Invalid options in vue.config.js: "publicPath" is not allowed.vue-cliверсия3.3.0. Официальное объяснение:

    Существуют некоторые ограничения на использование publicPath для относительных путей. Относительный publicPath следует избегать в следующих случаях:
    При использовании маршрутизации на основе HTML5 history.pushState;
    При создании многостраничного приложения с параметром pages.

    Только避免Если вы используете его, вы все равно сможете его настроить. Поскольку мне нужно настроить путь для некоторых проблем со ссылками на статические ресурсы, я надеюсь, что кто-то в курсе может ответить на него?

  3. Написав это, я отправился домой встречать Новый год. Желаю всем процветания в Китайском Новом году [eat Chicken.jpg]~

Категории