Как написать большое приложение на Vue.js и не умереть?

Question

[Артем]

Привет!

У меня довольно большой опыт разработки простых spa на Vue.js. Без серверного рендеринга, но с "плюшками" в виде Vuex, vue-cli, webpack.

Но теперь мне предстоит написать по-настоящему большое приложение (дашборд а-ля crm) с кастомными элементами управления (UI). Серверного рендеринга в требованиях нет.

Сложность в том, что сейчас уже имеется более 30 компонентов разного объема, и сборка в режиме dev занимает уже не 2 секунды, а 30-45, и это начинает напрягать. Стандартные для проекта UI компоненты, типа BaseBtn, BaseInput и т.п. вынес в отдельную npm библиотеку, чтобы не превращать структуру проекта в свалку.

Прошу Сообщество помочь советами по разработке крупных приложений на Vue.js.

Спасибо!

PS

Используя БЭМ наткнулся на неожиданную проблему - не хватает названий для блоков...

Решение найдено, см. мой ответ.

Comments

[Артем]

SmInc,

Изучить исходники нормальных крупных проектов.

Можете поделиться ссылкой? Буду очень благодарен.

Когда в одном вопросе несколько вопросов - это плохо.

Поэтому этот вопрос в PS. Как дополнение. Причина (проблема) одна - проект большой.

[Андрей Хохлов]

Надо копать в сторону конфига сборки.

Сейчас пишу что-то вроде crm, на данный момент 40+ "низкоуровневых" ui-компонентов и столько же собранных из них "высокоуровневых" компонентов со своей логикой (страницы, формы и т.д.). Собирается моментально, только измененный модуль, и сразу заменяется на горячую без перезагрузки.

(MacBook Pro 15 Late 2015, 16gb)

[xmoonlight]

Артем, не по теме vue, но может сильно облегчить разработку дашбоарда: includeHTML

[alex-1917]

xmoonlight, вы молодец, ваш инклюдАШТМЛ почти в каждом третьем вопросе...
Но тем не менее мне лично очень нравится, так как ваша либа весьма недурна и приятна.

[xmoonlight]

alex-1917, Благодарю за поддержку и положительный отзыв!
Я создавал её для себя, чтобы юзать самописный фронт (SPA-шаблон из файлов) с помощью банального локального запуска HTML-файла с диска/флешки и через AJAX/REST-запросы админить различные серверные службы.
Потом, решил поделиться со всеми и выложить на гитхаб.

Answer 1

[Buzzzzer]

Возможно что то не так в конфигах webpack ?

У меня сейчас в проекте порядка 600+ vue компонентов.
Пересборка в dev с hot reload занимает 2-5 сек.
(win, ram 16gb, ssd, какой то старенький i3)

Comments

[ilovemaryjane]

У меня сейчас в проекте порядка 600+ vue компонентов

Попахивает или безумием или пиздежом.

[Максим Тимофеев]

ssd

может решать

[Златослав Десятников]

Максим Тимофеев, без SSD комфортная разработка в принципе невозможна, если цените своё время.

[Buzzzzer]

ilovemaryjane, переписываем большое десктопное под вэб.
Это не сайт, поэтому так много

Answer 2

[Артем]

Спасибо всем ответившим!

Нашел решение.
Проблема была в конфигурации vue.config.js (использую vue-cli 3).

Для глобальных переменных и миксинов SASS (SCSS) использовал плагин style-resources-loader.

pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, 'src/scss/_variables.scss'),
        path.resolve(__dirname, 'src/scss/_mixins.scss'),
      ],
    }
  },

Именно из-за него сборка занимала много времени. Изменение одной буквы в HTML-коде компонента приводило к пересборке всех компонентов, использующих SCSS.

Решение проблемы:
1. npm remove style-resources-loader
2. удаление из конфига кода (см. выше)
3. добавление в конфиг кода:

css: {
    loaderOptions: {
      sass: {
        data: `
          @import "@/scss/_variables.scss";
          @import "@/scss/_mixins.scss";
        `,
      }
    }
  },

Результат:

DONE Compiled successfully in 1704ms 15:06:07
App running at:
- Local: localhost:8080

Answer 3

[Alexander Pushkarev]

Как-то странно у вас webpack настроен. У нас на проекте весьма большая сборка (~100 ui компонентов + ~300 view файлов), собирается на холодную порядка 10 секунд, на горячую 1-2 секунды. При этом весьма большие store и система роутов.

Конфиг: windows 10, 16bg, i7 7-го поколения

PS

Если вам не хватает БЭМ'а, что очень странно, используйте scope style и всё

Answer 4

[Владислав Копылов]

Полностью согласен с Buzzzzer !
У самого есть production проект где намного больше чем "30 компонентов разного объема" билдится все довольно шустро, не смотря что у меня Macbook Air. Попробуйте webpack-bundle-analyzer может какие-то аномалии в бандлах. Или сравните ваш конфиг webpack и тот который по-умолчанию в vue-cli.

Знаком со случаем когда люди не вникая в webpack, напутали с настройкой Entry Points, из-за чего бандл, под production ENV внутри докера билбился до 10 минут. Но ничего, не умерли от этого

Answer 5

[Антон Антон]

Скорее всего node modules пересобираются каждый раз.

Comments

[Антон Антон]

Артем, https://github.com/mzgoddard/hard-source-webpack-plugin