Separate js file for bundle and components in vuejs

Question

Suppose I have 100+ components that are used in different laravel blade file. I have a service-based system where different types of users can access different routes. Suppose administrator panel for us, admin panel for institution, employee panel, student panel, guardian panel, etc. As an administrator, we can access all. We have 20+ institutions managed by the same system and increasing day by day. When an admin access the system, he doesn't need to load whole js(6MB+ in 'npm run prod') file. But as we have one js file in the whole project, the admin user must load the whole 6MB+ js file. In 'npm run watch' mode the js file is 13 MB+? How can set different js for different user or can have multiple js file? How can fast my app to end-user?

Just a example of blade file:

<institution-student-attach-form
            get-site-base-country-list="{{route('get-institution-base-student-list')}}"
            student-details-view="{{route('student-view',[''])}}">

</institution-student-attach-form>

I use props to get the routes in component file.

Edit

     mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css').extract();

/**

* 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";
window.Vue = Vue;
window.axios = require("axios");
window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
require("promise.prototype.finally").shim();

import { Form, HasError, AlertError } from "vform";
window.Form = Form;

Vue.component(HasError.name, HasError);
Vue.component(AlertError.name, AlertError);

Vue.component("pagination", require("laravel-vue-pagination"));

//sweet alert 2

import swal from "sweetalert2";
window.swal = swal;
const toast = swal.mixin({
    toast: true,
    position: "top-end",
    showConfirmButton: false,
    timer: 15000
});
window.toast = toast;

//vue lang

import VueInternationalization from "vue-i18n";
import Locale from "./vue-i18n-locales.generated";

Vue.use(VueInternationalization);

const lang = document.documentElement.lang.substr(0, 2);
// or however you determine your current app locale

const i18n = new VueInternationalization({
    locale: lang,
    messages: Locale
});

//vue lang end

//https://hamed-ehtesham.github.io/pretty-checkbox-vue/#installation

import PrettyCheckbox from "pretty-checkbox-vue";
Vue.use(PrettyCheckbox);

//vue autocomplete

//ckeditor

import CKEditor from "@ckeditor/ckeditor5-vue";
Vue.use(CKEditor);

/**
 * Next, we will create a fresh Vue ap
 *
 *
 * plication 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.
 */

// dash board

Vue.component(
    "dashboard-site-employee-attendance-list",
    require("./components/dashboard/site/employeeAttendanceListComponent.vue")
);
Vue.component(
    "dashboard-site-latest-student-attendance-list",
    require("./components/dashboard/site/latestStudentAttendanceListComponent.vue")
);

Vue.component(
    "dashboard-site-employee-attendance-graph",
    require("./components/dashboard/site/dashboardEmployeeAttendanceGraphComponent.vue")
);

Vue.component(
    "site-academic-calendar-master-view",
    require("./components/site/AcademicCalendar/academicCalenderMasterComponent.vue")
);
// Vue.component(
//     "site-employee-academic-calendar-master-view",
//     require("./components/site/employee/calendar/EmployeeCalendarMasterComponent.vue")
// );

Vue.component(
    "site-employee-academic-calendar-master-view",
    require("./components/site/employee/calendar/EmployeeCalendarMasterComponent.vue")

);


// Vue.component(
//     "site-employee-academic-calendar-master-view",
//     require("./components/employee/EmployeeAacademicCalenderMasterComponent.vue")
// );
Vue.component(
    "site-academic-calendar-view",
    require("./components/site/AcademicCalendar/academicCalendarComponent.vue")
);
Vue.component(
    "site-academic-yearly-calendar-view",
    require("./components/site/AcademicCalendar/academicYearlyCalendarComponent.vue")
);
Vue.component(
    "site-academic-calendar-event-list-view",
    require("./components/site/AcademicCalendar/academicCalendarEventListComponent.vue")
);

Vue.component(
    "logged-common-view-all-notification-component",
    require("./components/LoggedCommon/AllNotificationsComponent.vue")
);

// EDU INTERNAL-..------------------------------------START---------------------

Vue.component(
    "edu-dashboard-palette-list",
    require("./components/edu/dashboard-palette/DashboardPaletteComponent.vue")
);

Vue.component(
    "edu-users-permission",
    require("./components/edu/users/PermissionComponent.vue")
);
Vue.component(
    "edu-role-list",
    require("./components/edu/role/EduRoleComponent.vue")
);

Vue.component(
    "edu-users-list",
    require("./components/edu/users/EduUserComponent.vue")
);

//site memebership
Vue.component(
    "site-membership",
    require("./components/edu/site-membership/SiteMembershipComponent.vue")
);

Vue.component(
    "menu-using-route-attachment",
    require("./components/menu/MenuUsingRouteAttachmentComponent.vue")
);
//Edu Fetch Log ---relate component
Vue.component(
    "edu-fetch-log-master",
    require("./components/edu/fetch-log/masterComponent.vue")
);
//Edu Fetch Log ---relate component END
Vue.component(
    "edu-package",
    require("./components/edu/package/EduPackageComponent.vue")
);
Vue.component(
    "academic-admission-fee-type-view",
    require("./components/academic/AcademicAdmissionFeeTypeComponent.vue")
);
Vue.component(
    "edu-site-payment-site-invoice-component",
    require("./components/edu/site-payment/InvoiceMasterComponent.vue")
);

//edu-company

Vue.component(
    "edu-company-company-list",
    require("./components/edu/company/CompanyComponent.vue")
);

// EDU INTERNAL-------------------------------------END-------------------

//Site Employee Leave-----------------------start-----------------

Vue.component(
    "employee-leave-history-master-component",
    require("./components/site/EmployeeLeave/employeeLeaveMasterComponent.vue")
);

Vue.component(
    "admin-leave-master-component",
    require("./components/site/EmployeeLeave/adminLeaveMasterComponent.vue")
);

Vue.component(
    "admin-leave-approve-master-component",
    require("./components/site/EmployeeLeave/adminLeaveApproveMasterComponent.vue")
);

//Site Employee Leave-----------------------end-----------------

//Company-------------------------------------START-------------------
Vue.component(
    "company-branch-list",
    require("./components/company/branch/BranchComponent.vue")
);

Vue.component(
    "company-role-list",
    require("./components/company/role/RoleComponent.vue")
);

Vue.component(
    "company-user-list",
    require("./components/company/user/UserComponent.vue")
);

// Company-------------------------------------END-------------------

//SITE INTERNAL-------------------------------------Start---------------------

//---global component

Vue.component(
    "site-base-student-filter-part-component",
    require("./components/student/SiteBaseStudentFilterPartComponent.vue")
);

Vue.component(
    "site-global-version-year-component",
    require("./components/site/globalComponent/SiteVersionYearComponent.vue")
);
Vue.component(
    "site-global-version-year-shift-component",
    require("./components/site/globalComponent/SiteVersionYearShiftComponent.vue")
);
Vue.component(
    "site-global-version-year-shift-dept-class-component",
    require("./components/site/globalComponent/SiteVersionYearShiftDeptClassComponent.vue")
);
Vue.component(
    "site-global-version-year-shift-dept-class-group-section-session-component",
    require("./components/site/globalComponent/SiteVersionYearShiftDeptClassGroupSectionSessionComponent.vue")
);

Vue.component(
    "site-global-version-year-shift-dept-class-group-section-session-period-type-component",
    require("./components/site/globalComponent/VersionYearShiftDeptClassGroupSectionSessionPeriodTypeComponent.vue")
);
Vue.component(
    "site-global-year-period-type-component",
    require("./components/site/globalComponent/YearPeriodTypeComponent.vue")
);

Vue.component(
    "site-version-year-shift-dept-class-group-component",
    require("./components/site/globalComponent/SiteVersionYearShiftDeptClassGroupSessionPeriodTypeComponent.vue")
);
Vue.component(
    "site-version-year-shift-dept-class-group-section-component",
    require("./components/site/globalComponent/SiteVersionYearShiftDeptClassGroupSessionPeriodTypeAndSessionSectionTypeComponent.vue")
);

Vue.component(
    "category-position-component",
    require("./components/site/employee/categoryPositionComponent.vue")
);

Vue.component(
    "site-user-master-component",
    require("./components/site/users/masterComponent.vue")
);

Vue.component(
    "site-site-options-master",
    require("./components/site/options/masterComponent.vue")
);

//Site Exam --------------------------------------

Vue.component(
    "site-examination-exam-type-setting-component",
    require("./components/site/exam/SiteExaminationExamTypeSettingComponent.vue")
);

Vue.component(
    "site-exam-committee-declare-component",
    require("./components/site/exam/SiteExamCommitteeDeclareComponent.vue")
);

Vue.component(
    "site-base-exam-declare-component",
    require("./components/site/exam/SiteBaseExamDeclareComponent.vue")
);

Vue.component(
    "site-exam-earks-entry-operator-base-component",
    require("./components/site/exam/SiteExamMarksEntryOperatorbaseComponent.vue")
);

//Site Result --------------------------------------

Vue.component(
    "site-base-result-setting-component",
    require("./components/site/result/SiteBaseResultSettingComponent.vue")
);


Vue.component(
    "site-base-result-generate-component",
    require("./components/site/result/SiteBaseResultGenerateComponent.vue")
); 


Vue.component(
    "site-base-result-system-setting-component",
    require("./components/site/result/SiteBaseResultSystemSettingComponent.vue")
);

//SITE INTERNAL------------------------------------END-------------------------

Vue.component("passport-clients", require("./components/passport/Clients.vue"));

Vue.component(
    "passport-authorized-clients",
    require("./components/passport/AuthorizedClients.vue")
);

Vue.component(
    "passport-personal-access-tokens",
    require("./components/passport/PersonalAccessTokens.vue")
);

//Assign Extra Permission

Vue.component(
    "edu-user-assign-extra-permission", 
    require("./components/edu/users/AssignExtraPermissionComponent.vue")
);

//LARAVEL PASSPORT------------------------------------END-------------------------

Vue.component(
    "example-component", 
    require("./components/ExampleComponent.vue")
);
Vue.component(
    "timetable-component",
    require("./components/TimetableComponent.vue")
);

Vue.component(
    "sub-module-attachment-component",
    require("./components/module/SubModuleAttachmentComponent.vue")
);
Vue.component(
    "module-master-component",
    require("./components/module/masterComponent.vue")
);

Vue.component(
    "module-component",
    require("./components/module/ModuleAttachmentComponent.vue")
);

Vue.component(
    "academic-subject-component",
    require("./components/academic/AcademicSubjectComponent.vue")
);
Vue.component(
    "academic-subject-condition-component",
    require("./components/academic/AcademicSubjectConditionComponent.vue")
);
Vue.component(
    "academic-fee-component",
    require("./components/academic/AcademicFeeComponent.vue")
);
Vue.component(
    "academic-section-component",
    require("./components/academic/AcademicSectionComponent.vue")
);
Vue.component(
    "academic-group-detail-component",
    require("./components/AcademicGroupDetailComponent.vue")
);
Vue.component(
    "academic-session-type-component",
    require("./components/academic/AcademicSessionTypeComponent.vue")
);

Vue.component(
    "site-group-fee-head-subhead-group-setting-component",
    require("./components/site_group/fee/SiteGroupFeeHeadSubHeadGroupSettingComponent.vue")
);
Vue.component(
    "site-group-fee-tab-component",
    require("./components/site_group/fee/SiteGroupFeeTabComponent.vue")
);

Vue.component(
    "site-group-fee-allocation-component",
    require("./components/site_group/fee/SiteGroupFeeAllocationComponent.vue")
);

Vue.component(
    "site-group-fee-generate-component",
    require("./components/site_group/fee/SiteGroupFeeGenerateComponent.vue")
);

Vue.component(
    "site-group-waiver-generate-gomponent",
    require("./components/site_group/fee/SiteGroupWaiverGenerateComponent.vue")
);

//==========Fee master Component===============
Vue.component(
    "site-fee-setting-master-component",
    require("./components/site/fee/feeSettingMasterComponent.vue")
);
Vue.component(
    "site-fee-collection-master-component",
    require("./components/site/fee/feeCollectionMasterComponent.vue")
);
Vue.component(
    "site-fee-cancelation-master-component",
    require("./components/site/fee-cancellation/feeCancellationMasterComponent.vue")
);

//--------------------End----------------------

Vue.component(
    "site-group-demand-slip-generate-component",
    require("./components/site_group/fee/SiteGroupDemandSlipGenerateComponent.vue")
);

Vue.component(
    "site-demand-slip-generate-component",
    require("./components/site/fee/SiteDemandSlipGenerateComponent.vue")
);

Vue.component(
    "site-fee-multiple-student-payment-component",
    require("./components/site/fee/SiteFeeMultipleStudentPaymentComponent.vue")
);

Vue.component(
    "site-group-fee-single-student-payment-component",
    require("./components/site_group/fee/SiteGroupFeeSingleStudentPaymentComponent.vue")
);

Vue.component(
    "site-group-fee-multiple-student-payment-component",
    require("./components/site_group/fee/SiteGroupFeeMultipleStudentPaymentComponent.vue")
);

Vue.component(
    "site-fee-payment-component",
    require("./components/site/fee/SiteStudentFeePaymentHistoryComponent.vue")
);

Vue.component(
    "edu-site-group-component",
    require("./components/edu/site_group/SiteGroupComponent.vue")
);

Vue.component(
    "site-group-version-year-shift-dept-class-group-component",
    require("./components/site_group/SiteGroupVersionYearShiftDeptClassGroupComponent.vue")
);

Vue.component(
    "site-group-setting-component",
    require("./components/site_group/SiteGroupSettingComponent.vue")
);

Vue.component(
    "site-info-component",
    require("./components/edu/site/SiteInfoComponent.vue")
);
Vue.component(
    "site-batch-details",
    require("./components/site/batch/BatchDetailsComponent.vue")
);
Vue.component(
    "subject-group-condition-setting-component",
    require("./components/site/SubjectGroupConditionSettingComponent.vue")
);
Vue.component(
    "site-shift-class-group-section-component",
    require("./components/site/SiteShiftClassGroupSectionComponent.vue")
);

Vue.component(
    "site-class-similarity-component",
    require("./components/site/SiteClassSimilaritiesComponent.vue")
);
Vue.component(
    "site-class-session-position-component",
    require("./components/site/SiteClassSessionPositionComponent.vue")
);

Vue.component(
    "site-student-attach-form",
    require("./components/student/SiteStudentAttachComponent.vue")
);
Vue.component(
    "site-shift-details-component",
    require("./components/site/SiteShiftDetailsComponent.vue")
);

Vue.component(
    "site-student-attendance-list-component",
    require("./components/site/student/attendance/StudentAttendanceListComponent.vue")
);

Vue.component(
    "site-student-attendance-master-component",
    require("./components/site/student/attendance/masterComponent.vue")
);
Vue.component(
    "site-student-attendance-period-wise-component",
    require("./components/site/student/attendance/PeriodAttendanceComponent.vue")
);

Vue.component(
    "site-base-student-list-component",
    require("./components/student/SiteBaseStudentListComponent.vue")
);

Vue.component(
    "academic-group-list-tab-component",
    require("./components/site/AcademicGroupListTabComponent.vue")
);
Vue.component(
    "site-academic-period-type-setting-component",
    require("./components/site/academic/PeriodTypeSettingComponent.vue")
);

// ==================site fee report==================
Vue.component(
    "site-student-payment-report-master-component",
    require("./components/site/fee-report/SiteFeeReportMasterComponent.vue")
);
Vue.component(
    "site-student-wise-payment-report-component",
    require("./components/site/fee-report/SiteStudentWisePaymentReportComponent.vue")
);
Vue.component(
    "site-clas-wise-payment-report-component",
    require("./components/site/fee-report/SiteClassBaseFeeReportComponent.vue")
);
Vue.component(
    "site-general-payment-report-component",
    require("./components/site/fee-report/SiteGeneralFeeReportComponent.vue")
);
//site-group related component============================

Vue.component(
    "site-group-controlling-component",
    require("./components/site_group/SiteGroupControllingComponent.vue")
);

//site group user
Vue.component(
    "site-group-users-list",
    require("./components/site_group/SiteGroupUserComponent.vue")
);
Vue.component(
    "employee-attendance-master-component",
    require("./components/site/employee/attendance/masterComponent.vue")
);
Vue.component(
    "site-employee-attendance-device-attendance-component",
    require("./components/site/employee/attendance/DeviceAttendanceComponent.vue")
);
Vue.component(
    "site-employee-attendance-manual-attendance-component",
    require("./components/site/employee/attendance/ManualAttendanceComponent.vue")
);
// ==================fee=========================
Vue.component(
    "academic-fee-head-list-component",
    require("./components/academic/academicFeeHeadComponent.vue")
);
Vue.component(
    "academic-fee-sub-head-list-component",
    require("./components/academic/AcademicFeeSubHeadComponent.vue")
);
Vue.component(
    "academic-fee-group-list-component",
    require("./components/academic/AcademicFeeGroupComponent.vue")
);
Vue.component(
    "academic-site-waiver-type-view-component",
    require("./components/site/SiteWaiverTypeComponent.vue")
);

Vue.component(
    "site-fee-sub-head-allocation-view-component",
    require("./components/site/fee/SiteFeeSubHeadAllocationComponent.vue")
);
Vue.component(
    "site-fee-allocation-view-component",
    require("./components/site/fee/SiteFeeAllocationComponent.vue")
);
Vue.component(
    "site-student-fee-generate-view-component",
    require("./components/site/fee/SiteStudentFeeGenerateComponent.vue")
);
Vue.component(
    "student-waiver-generate-view-component",
    require("./components/site/fee/StudentWaiverGenerateComponent.vue")
);
// Vue.component(
//     "student-waiver-generate-view-component",
//     require("./components/site/fee/OldStudentWaiverHistoryComponent.vue")
// );
Vue.component(
    "site-student-offer-type-view-component",
    require("./components/site/SiteStudentOfferTypeComponent.vue")
);
Vue.component(
    "student-waiver-document-view-component",
    require("./components/site/fee/StudentWaiverDocumentComponent.vue")
);

Vue.component(
    "student-fee-offer-detail-view-component",
    require("./components/site/fee/StudentFeeOfferDetailComponent.vue")
);
// Vue.component(
//     "student-payment-view-component",
//     require("./components/site/fee/StudentPaymentComponent.vue")
// );

/* ----------------routine------------------ */

Vue.component(
    "site-routine-master",
    require("./components/site/routine/masterComponent.vue")
);

Vue.component(
    "class-timing-component",
    require("./components/site/routine/ClassTimingComponent.vue")
);

Vue.component(
    "class-timing-details-component",
    require("./components/site/routine/ClassTimingDetailsComponent.vue")
);

Vue.component(
    "class-timing-weekday-component",
    require("./components/site/routine/WeekdayClassTimingComponent.vue")
);

Vue.component(
    "routine-details-component",
    require("./components/site/routine/RoutineSetupComponent.vue")
);
/* --------------------- */
/*--------------------Employee----------------------------- */

Vue.component(
    "employee-year-version-shift-class-dept-group-section-component",
    require("./components/site/employee/global/employeeYearVersionShiftClassDeptGroupSectionComponent.vue")
);

Vue.component(
    "employee-attach-component",
    require("./components/employee/EmployeeAttachComponent.vue")
);

Vue.component(
    "employee-list-component",
    require("./components/employee/EmployeeListComponent.vue")
);

Vue.component(
    "site-employee-routine-master",
    require("./components/site/employee/routine/masterComponent.vue")
);

//Notice============================
Vue.component(
    "site-communication-notice-master-component",
    require("./components/site/communication/Notice/MasterComponent.vue")
);





/*---------------------------- */

//Message============================
Vue.component(
    "site-message-master-component",
    require("./components/site/communication/MasterComponent.vue")
);
/* Vue.component(
    "site-message-component",
    require("./components/site/communication/MessageComponent.vue")
); */
Vue.component(
    "site-inbox-component",
    require("./components/site/communication/InboxComponent.vue")
);

Vue.component(
    "site-folder-component",
    require("./components/site/communication/FolderComponent.vue")
);
Vue.component(
    "site-communication-custome-message-component",
    require("./components/site/communication/MessageToCustomNumber.vue")
);
/*---------------------------- */

//Sms============================
Vue.component(
    "site-sms-component",
    require("./components/site/communication/SmsComponent.vue")
);

/*---------------------------- */

/* filter active and inactive */

Vue.filter("activeInactive", function(value) {
    if (value == 1) {
        return "Active";
    } else {
        return "Inactive";
    }
});
Vue.filter("yesNo", function(value) {
    if (value == 1) {
        return "Yes";
    } else {
        return "No";
    }
});
import moment from "moment";

Vue.filter("formatTime", function(value) {
    if (value) {
        return moment(String(value), ["HH:mm"]).format("hh:mm A");
    }
});

Vue.filter("formatTimeSec", function(value) {
    if (value) {
        return moment(String(value), ["HH:mm:ss"]).format("hh:mm:ss A");
    }
});
Vue.filter("formatDateTime", function(value) {
    if (value) {
        return moment(String(value)).format("DD MMMM YYYY hh:mm A");
    }
});
Vue.filter("formatDayMonth", function(value) {
    if (value) {
        return moment(String(value), ["dd:mm"]).format("dd:mm");
    }
});
Vue.filter("formatMinDiff", function(stTime, endTime) {
    //console.log(stTime+' '+endTime)

    var startTime = moment(stTime, "hh:mm:ss");
    var endTime = moment(endTime, "hh:mm:ss");
    var mins = moment
        .utc(moment(endTime, "hh:mm:ss").diff(moment(startTime, "hh:mm:ss")))
        .format("mm");
    return mins + " mins";
});
Vue.filter("formatDate", function(value) {
    console.log(value);
    if (value) {
        return moment(String(value)).format("DD MMMM YYYY");
    }
});

//capitalize --- apple->Apple
Vue.filter("capitalize", function(value) {
    if (!value) return "";
    return value.charAt(0).toUpperCase() + value.slice(1);
});

//remove html tags
Vue.filter("striphtml", function(value) {
    var div = document.createElement("div");
    div.innerHTML = value;
    var text = div.textContent || div.innerText || "";
    return text;
});

Vue.filter("currency", function(value) {
    return "৳ " + parseFloat(value).toFixed(2);
});
Vue.filter("round", function(value) {
    return parseFloat(value).toFixed(0);
});

const app = new Vue({
    el: "#app",
    i18n,
    components: {},

    methods: {},
    mounted() {
        console.log("d" + document.documentElement.lang.substr(0, 2));
    }
});

Answer 1

You can extract the Vue framework core library using mix then compile each components needed for a specific page to a separate bundle using webpack

For example

mix.js(src, output).extract();

And have JS files that register the Vue components

institution.js

Vue.component('institution-student-attach-form', require('./components/institution-student-attach-form.vue').default);

And compile to a separate file

mix.js('resources/js/app.js', 'public/js')
   .js('resources/js/institution.js', 'public/js')
   .extract()
   .sass('resources/sass/app.scss', 'public/css')

And include that file in the specific blade view, and so on and so forth for other scripts and views

Hope this helps