vendredi 13 avril 2018

VueJS 2 and Laravel5 taking huge time to for single page application build

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