perf: optimize build — chunk splitting, remove VueDevTools from prod, fix firebase-tools to devDeps
- vite.config.ts: Remove VueDevTools from production build (dev only) - vite.config.ts: Add manualChunks for firebase, charts, pdf, vue, maps vendors - vite.config.ts: Increase chunkSizeWarningLimit to 700KB for Google Maps - package.json: Move firebase-tools from dependencies to devDependencies - router/index.ts: Add webpackChunkName groups (transport, discover, user, admin, roles) - Clean up build log files (build_debug.txt, build_error*.txt, etc.) Build time improvement: chunks now load on demand per user role
This commit is contained in:
@ -18,7 +18,6 @@
|
||||
"axios": "^1.13.2",
|
||||
"chart.js": "^4.5.1",
|
||||
"firebase": "^12.9.0",
|
||||
"firebase-tools": "^15.7.0",
|
||||
"html2canvas": "^1.4.1",
|
||||
"jspdf": "^4.1.0",
|
||||
"pinia": "^3.0.4",
|
||||
@ -33,6 +32,7 @@
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
"autoprefixer": "^10.4.24",
|
||||
"firebase-tools": "^15.7.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^4.2.0",
|
||||
"typescript": "~5.9.3",
|
||||
|
||||
@ -4,131 +4,142 @@ import { createRouter, createWebHistory } from 'vue-router'
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
// ─── Vistas Públicas Core (cargadas en el chunk principal) ───────────
|
||||
{
|
||||
path: '/',
|
||||
name: 'splash',
|
||||
component: () => import('@/views/SplashScreen.vue'),
|
||||
component: () => import(/* webpackChunkName: "splash" */ '@/views/SplashScreen.vue'),
|
||||
},
|
||||
{
|
||||
path: '/map',
|
||||
name: 'map',
|
||||
component: () => import('@/views/MapView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/discover',
|
||||
name: 'discover',
|
||||
component: () => import('@/views/DiscoverView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/business/:id',
|
||||
name: 'business-details',
|
||||
component: () => import('@/views/BusinessDetailsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/routes',
|
||||
name: 'routes',
|
||||
component: () => import('@/views/RoutesView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/schedules',
|
||||
name: 'schedules',
|
||||
component: () => import('@/views/SchedulesView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/coupons',
|
||||
name: 'coupons',
|
||||
component: () => import('@/views/CouponsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/favorites',
|
||||
name: 'favorites',
|
||||
component: () => import('@/views/FavoritesView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
component: () => import('@/views/ProfileView.vue'),
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
{
|
||||
path: '/taxi',
|
||||
name: 'taxi',
|
||||
component: () => import('@/views/TaxiView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/bus-stop/:id',
|
||||
name: 'bus-stop-details',
|
||||
component: () => import('@/views/BusStopDetailsView.vue'),
|
||||
component: () => import(/* webpackChunkName: "map" */ '@/views/MapView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
name: 'auth',
|
||||
component: () => import('@/views/AuthView.vue'),
|
||||
component: () => import(/* webpackChunkName: "auth" */ '@/views/AuthView.vue'),
|
||||
},
|
||||
|
||||
// ─── Vistas de Transporte (chunk: transport) ─────────────────────────
|
||||
{
|
||||
path: '/routes',
|
||||
name: 'routes',
|
||||
component: () => import(/* webpackChunkName: "transport" */ '@/views/RoutesView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/schedules',
|
||||
name: 'schedules',
|
||||
component: () => import(/* webpackChunkName: "transport" */ '@/views/SchedulesView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/bus-stop/:id',
|
||||
name: 'bus-stop-details',
|
||||
component: () => import(/* webpackChunkName: "transport" */ '@/views/BusStopDetailsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/taxi',
|
||||
name: 'taxi',
|
||||
component: () => import(/* webpackChunkName: "transport" */ '@/views/TaxiView.vue'),
|
||||
},
|
||||
|
||||
// ─── Vistas de Descubrir (chunk: discover) ───────────────────────────
|
||||
{
|
||||
path: '/discover',
|
||||
name: 'discover',
|
||||
component: () => import(/* webpackChunkName: "discover" */ '@/views/DiscoverView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/business/:id',
|
||||
name: 'business-details',
|
||||
component: () => import(/* webpackChunkName: "discover" */ '@/views/BusinessDetailsView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/coupons',
|
||||
name: 'coupons',
|
||||
component: () => import(/* webpackChunkName: "discover" */ '@/views/CouponsView.vue'),
|
||||
},
|
||||
|
||||
// ─── Vistas de Usuario (chunk: user) ─────────────────────────────────
|
||||
{
|
||||
path: '/favorites',
|
||||
name: 'favorites',
|
||||
component: () => import(/* webpackChunkName: "user" */ '@/views/FavoritesView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/profile',
|
||||
name: 'profile',
|
||||
component: () => import(/* webpackChunkName: "user" */ '@/views/ProfileView.vue'),
|
||||
meta: { requiresAuth: true }
|
||||
},
|
||||
|
||||
// ─── Vistas de Admin (chunk: admin — solo carga para admins) ─────────
|
||||
{
|
||||
path: '/admin',
|
||||
name: 'admin-panel',
|
||||
component: () => import('@/views/AdminPanel.vue'),
|
||||
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminPanel.vue'),
|
||||
meta: { requiresAuth: true, role: 'admin' }
|
||||
},
|
||||
{
|
||||
path: '/admin/bus-stops',
|
||||
name: 'admin-bus-stops',
|
||||
component: () => import('@/views/AdminBusStops.vue'),
|
||||
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminBusStops.vue'),
|
||||
meta: { requiresAuth: true, role: 'admin' }
|
||||
},
|
||||
{
|
||||
path: '/admin/routes',
|
||||
name: 'admin-routes',
|
||||
component: () => import('@/views/AdminRoutes.vue'),
|
||||
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminRoutes.vue'),
|
||||
meta: { requiresAuth: true, role: 'admin' }
|
||||
},
|
||||
{
|
||||
path: '/admin/reports',
|
||||
name: 'admin-reports',
|
||||
component: () => import('@/views/AdminReports.vue'),
|
||||
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminReports.vue'),
|
||||
meta: { requiresAuth: true, role: 'admin' }
|
||||
},
|
||||
{
|
||||
path: '/admin/schedules',
|
||||
name: 'admin-schedules',
|
||||
component: () => import('@/views/AdminSchedules.vue'),
|
||||
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminSchedules.vue'),
|
||||
meta: { requiresAuth: true, role: 'admin' }
|
||||
},
|
||||
{
|
||||
path: '/admin/drivers',
|
||||
name: 'admin-drivers',
|
||||
component: () => import('@/views/AdminDrivers.vue'),
|
||||
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminDrivers.vue'),
|
||||
meta: { requiresAuth: true, role: 'admin' }
|
||||
},
|
||||
{
|
||||
path: '/admin/analytics',
|
||||
name: 'admin-analytics',
|
||||
component: () => import('@/views/StrategicAnalytics.vue'),
|
||||
component: () => import(/* webpackChunkName: "admin" */ '@/views/StrategicAnalytics.vue'),
|
||||
meta: { requiresAuth: true, role: 'admin' }
|
||||
},
|
||||
{
|
||||
path: '/admin/taxis',
|
||||
name: 'admin-taxis',
|
||||
component: () => import('@/views/AdminTaxis.vue'),
|
||||
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminTaxis.vue'),
|
||||
meta: { requiresAuth: true, role: 'admin' }
|
||||
},
|
||||
{
|
||||
path: '/admin/shuttles',
|
||||
name: 'admin-shuttles',
|
||||
component: () => import('@/views/AdminShuttles.vue'),
|
||||
component: () => import(/* webpackChunkName: "admin" */ '@/views/AdminShuttles.vue'),
|
||||
meta: { requiresAuth: true, role: 'admin' }
|
||||
},
|
||||
|
||||
// ─── Vistas de Roles Especiales (chunk: roles) ───────────────────────
|
||||
{
|
||||
path: '/promoter',
|
||||
name: 'promoter-dashboard',
|
||||
component: () => import('@/views/PromoterDashboard.vue'),
|
||||
component: () => import(/* webpackChunkName: "roles" */ '@/views/PromoterDashboard.vue'),
|
||||
meta: { requiresAuth: true, role: ['PROMOTER', 'ADMIN'] }
|
||||
},
|
||||
{
|
||||
path: '/driver',
|
||||
name: 'driver-dashboard',
|
||||
component: () => import('@/views/DriverDashboard.vue'),
|
||||
component: () => import(/* webpackChunkName: "roles" */ '@/views/DriverDashboard.vue'),
|
||||
meta: { requiresAuth: true, role: ['DRIVER', 'ADMIN'] }
|
||||
},
|
||||
],
|
||||
@ -158,4 +169,3 @@ router.beforeEach((to, _from, next) => {
|
||||
})
|
||||
|
||||
export default router
|
||||
|
||||
|
||||
@ -1,16 +1,19 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import VueDevTools from 'vite-plugin-vue-devtools'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import path from 'path'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
export default defineConfig(({ mode }) => {
|
||||
const isDev = mode === 'development'
|
||||
|
||||
return {
|
||||
plugins: [
|
||||
vue(),
|
||||
tailwindcss(),
|
||||
VueDevTools(),
|
||||
// VueDevTools SOLO en desarrollo — no se incluye en el bundle de producción
|
||||
...(isDev ? [require('vite-plugin-vue-devtools').default()] : []),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
includeAssets: ['icon-192.png', 'icon-512.png', 'icon-1024.png', 'favicon.ico'],
|
||||
@ -86,4 +89,40 @@ export default defineConfig({
|
||||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
build: {
|
||||
// Ajustar límite de advertencia (MapView + Google Maps son grandes por naturaleza)
|
||||
chunkSizeWarningLimit: 700,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
// Dividir código en chunks lógicos para cargas más rápidas en producción
|
||||
manualChunks: (id) => {
|
||||
// Vendor: Firebase (bundle más pesado del stack)
|
||||
if (id.includes('node_modules/firebase')) {
|
||||
return 'vendor-firebase'
|
||||
}
|
||||
// Vendor: Charts y PDF (solo usados en vistas de Admin)
|
||||
if (id.includes('node_modules/chart.js') || id.includes('node_modules/vue-chartjs')) {
|
||||
return 'vendor-charts'
|
||||
}
|
||||
if (id.includes('node_modules/jspdf') || id.includes('node_modules/html2canvas')) {
|
||||
return 'vendor-pdf'
|
||||
}
|
||||
// Vendor: Ecosistema Vue (vue, pinia, router, i18n)
|
||||
if (
|
||||
id.includes('node_modules/vue') ||
|
||||
id.includes('node_modules/pinia') ||
|
||||
id.includes('node_modules/vue-router') ||
|
||||
id.includes('node_modules/vue-i18n')
|
||||
) {
|
||||
return 'vendor-vue'
|
||||
}
|
||||
// Vendor: Google Maps loader
|
||||
if (id.includes('node_modules/@googlemaps')) {
|
||||
return 'vendor-maps'
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user