Автоматическая сборка

Автоматическая сборка в Quasar строится на интеграции с современными инструментами сборки, такими как Webpack и Vite, что позволяет управлять процессом компиляции, оптимизации и упаковки проекта на Vue.js. В Quasar автоматическая сборка обеспечивает генерацию готовых к развертыванию приложений для различных платформ: веб, мобильные устройства через Cordova/Capacitor и настольные приложения через Electron.

Конфигурация сборки

Файл quasar.config.js является ключевым для настройки сборочного процесса. Он разделён на секции, каждая из которых отвечает за определённый аспект:

  • build – настройки компиляции и бандлинга:

    • vueRouterMode: определяет режим роутинга (history или hash).
    • env: определяет переменные окружения для разных стадий сборки.
    • analyze: включает визуализацию размера бандла.
    • extendWebpack: позволяет добавлять кастомные правила и плагины Webpack.

  • devServer – конфигурация локального сервера разработки:

    • port, open, proxy для проксирования API-запросов.

  • framework – подключение Quasar-плагинов, компонентов и иконок.

  • animations – выбор активных анимаций для уменьшения конечного бандла.

build: {
  vueRouterMode: 'history',
  env: {
    API_URL: process.env.API_URL
  },
  analyze: true,
  extendWebpack(cfg) {
    cfg.module.rules.push({
      test: /\.md$/,
      loader: 'raw-loader'
    })
  }
}

Разделение кода (Code Splitting)

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

const UserProfile = () => import('pages/UserProfile.vue');

Webpack автоматически создаёт отдельные чанки и загружает их при маршрутизации. В quasar.config.js можно дополнительно оптимизировать:

build: {
  splitChunks: {
    layouts: true,
    pages: true,
    vendor: true
  }
}

Минификация и оптимизация

Quasar использует Terser для минификации JavaScript и CSSnano для оптимизации CSS. Включение минификации уменьшает размер файлов и ускоряет загрузку страниц. Для продакшн-сборки минификация включена по умолчанию:

build: {
  minify: true,
  gzip: true
}

Дополнительно можно включить gzip-сжатие и brotli, чтобы сервер отдавал уже сжатые файлы, что снижает время загрузки.

Хеширование и кэширование

Для предотвращения проблем с кэшированием браузера Quasar добавляет content hash к именам файлов. Это позволяет безопасно обновлять приложение без необходимости очистки кэша у пользователей.

build: {
  filenameHashing: true
}

Плагины и расширения

Quasar позволяет подключать плагины Webpack для расширенной сборки:

  • ImageminPlugin – сжатие изображений.
  • BundleAnalyzerPlugin – анализ размера бандла.
  • DefinePlugin – внедрение глобальных констант и переменных окружения.
extendWebpack(cfg) {
  const ImageminPlugin = require('imagemin-webpack-plugin').default;
  cfg.plugins.push(new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }));
}

Автоматическая сборка под мобильные и десктопные платформы

Quasar интегрируется с Cordova, Capacitor и Electron, что позволяет запускать одну кодовую базу на разных платформах. Для мобильных приложений Quasar автоматически генерирует конфигурацию и ресурсы для iOS и Android:

quasar build -m capacitor -T android
quasar build -m capacitor -T ios

Для Electron:

quasar build -m electron

Сборка под Electron поддерживает packaging, code signing и интеграцию с автоподпиской обновлений.

Настройка окружений

Quasar поддерживает несколько окружений (development, staging, production) с различными переменными. Используются файлы .env:

  • .env.development
  • .env.production
  • .env.staging

Пример:

API_URL=https://api.example.com
FEATURE_FLAG=true

Quasar автоматически подставляет значения в сборку через process.env.

Автоматизация сборочного процесса

Для ускорения сборки и тестирования можно использовать скрипты npm:

"scripts": {
  "dev": "quasar dev",
  "build:web": "quasar build -m spa",
  "build:mobile": "quasar build -m capacitor",
  "lint": "eslint --ext .js,.vue src"
}

Можно интегрировать с CI/CD системами, например, GitHub Actions или GitLab CI, чтобы сборка происходила автоматически при коммите в ветку main.

Оптимизация производительности

Для крупных проектов рекомендуется:

  • Использовать динамический импорт компонентов и маршрутов.
  • Минимизировать использование глобальных CSS и скриптов.
  • Подключать только необходимые Quasar-компоненты через tree-shaking.
  • Включать визуализатор бандла (analyze: true) для анализа размера файлов.
  • Настроить кэширование и хеширование ресурсов.

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

Оглавление