I am developing Single Page Application through using Laravel+VueJS2, i am using VueRouter for creating whole application routes, i am using yarn for making build, it takes 4042.55 seconds which is equal to 67 minutes which is totally unacceptable, here is the screenshot of build result https://i.imgur.com/EFUZ3ZY.png I am placing the app.js code below
kindly help me in this regard
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
import Vue from 'vue'
import store from './store'
import VueRouter from 'vue-router'
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
// Components
import Layout from './components/layout/Layout'
import HomeTemplate from './components/templates/Home'
//TEMPALTES FOR QUICK LINKS
import SendMessage from './components/modals/SendMessage'
import SubmitRequest from './components/modals/SubmitRequest'
import MakePayment from './components/modals/MakePayment'
import ManageLease from './components/modals/ManageMyLease'
import Dashboard from './components/dashboard/Dashboard'
import Tickets from './components/tickets/Tickets'
import CreateTicketForm from './components/tickets/CreateTicketForm'
import UpdateTicketForm from './components/tickets/UpdateTicketForm'
//TEMPALTES FOR COMMUNITY
import Events from './components/community/Events'
import Links from './components/community/Links'
import CommunityGroups from './components/community/Groups'
import GeneralInfo from './components/community/GeneralInfo'
//AUTHENTICATION TEMPALTES
import Login from './components/authentication/Login'
import Register from './components/authentication/Register'
import ForgetPassword from './components/authentication/ForgetPassword'
import Users from './components/users/Users'
import CreateUserForm from './components/users/CreateUserForm'
import UpdateUserForm from './components/users/UpdateUserForm'
import Groups from './components/groups/Groups'
import CreateGroupForm from './components/groups/CreateGroupForm'
import UpdateGroupForm from './components/groups/UpdateGroupForm'
import Products from './components/products/Products'
import CreateProductForm from './components/products/CreateProductForm'
import UpdateProductForm from './components/products/UpdateProductForm'
import Privileges from './components/privileges/Privileges'
import Transactions from './components/transactions/Transactions'
import SingleTransaction from './components/transactions/SingleTransaction'
import UpdateProfile from './components/update-profile/UpdateProfile'
import ChangePassword from './components/change-password/ChangePassword'
import Settings from './components/settings/Settings'
import AccountSettings from './components/settings/AccountSettings'
//import VModal from 'vue-js-modal'
//Vue.use(VueSweetalert2);
Vue.use(VueRouter)
//Vue.use(VModal)
const routes = [
{
path: '/',
component: Layout,
children: [
{
path: '/',
name: 'dashboard',
component: Dashboard
},
{
path: 'users',
name: 'users',
component: Users
},
{
path: 'create-user-form',
name: 'create-user-form',
component: CreateUserForm
},
{
path: 'update-user-form/:id',
name: 'update-user-form',
component: UpdateUserForm
},
{
path: 'groups',
name: 'groups',
component: Groups
},
{
path: 'create-group-form',
name: 'create-group-form',
component: CreateGroupForm
},
{
path: 'update-group-form/:id',
name: 'update-group-form',
component: UpdateGroupForm
},
{
path: 'privileges',
name: 'privileges',
component: Privileges
},
{
path: 'products',
name: 'products',
component: Products
},
{
path: 'create-product-form',
name: 'create-product-form',
component: CreateProductForm
},
{
path: 'update-product-form/:id',
name: 'update-product-form',
component: UpdateProductForm
},
{
path: 'transactions',
name: 'transactions',
component: Transactions
},
{
path: 'single-transaction/:invoice',
name: 'single-transaction',
component: SingleTransaction
},
{
path: 'update-profile',
name: 'update-profile',
component: UpdateProfile
},
{
path: 'settings',
name: 'settings',
component: Settings
},
{
path: 'account-settings',
name: 'account-settings',
component: AccountSettings
},
{
path: '/send-message',
name: 'send-message',
component: SendMessage
},
{
path: '/make-payment',
name: 'make-payment',
component: MakePayment
},
{
path: '/manage-lease',
name: 'manage-lease',
component: ManageLease
},
{
path: '/submite-request',
name: 'submit-request',
component: SubmitRequest
},
{
path: '/tickets',
name: 'tickets',
component: Tickets
},
{
path: 'create-new-ticket',
name: 'create-new-ticket',
component: CreateTicketForm
},
{
path: 'update-ticket-form/:id',
name: 'update-ticket-form',
component: UpdateTicketForm
},
{
path: '/events',
name: 'events',
component: Events
},
{
path: '/community-groups',
name: 'community-groups',
component: CommunityGroups
},
{
path: '/links',
name: 'links',
component: Links
},
{
path: '/general-info',
name: 'general-info',
component: GeneralInfo
},
{
path: 'change-password',
name: 'change-password',
component: ChangePassword
}
]
},
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/register',
name: 'register',
component: Register
},
{
path: '/forget-password',
name: 'forget-password',
component: ForgetPassword
}
]
const router = new VueRouter({
mode: 'history',
routes: routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})
router.beforeEach((to, from, next) => {
// Nanobar
const nanobar = new Nanobar();
nanobar.go(30);
nanobar.go(76);
setTimeout(() => {
nanobar.go(100);
}, 1000)
// After authentication
var afterLogin = [
'login'
]
// Before authentication
var beforeLogin = [
'dashboard'
]
if (localStorage.getItem('user') !== null && afterLogin.indexOf(to.name) !== -1) {
next({ name: 'dashboard' })
} else if (localStorage.getItem('user') === null && beforeLogin.indexOf(to.name) !== -1) {
next({ name: 'login' })
} else {
next()
}
})
const app = new Vue({
store,
router
}).$mount('#main')
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire