Отдельный файл js для комплекта и компонентов в vuejs

Question

Предположим, у меня есть более 100 компонентов, которые используются в другом файле лезвия Laravel. У меня есть сервисная система, где разные типы пользователей могут получать доступ к разным маршрутам. Предположим, что у нас есть панель администратора, панель администратора для учреждения, панель сотрудников, панель студентов, панель опекуна и т. Д. Как администратор мы можем получить доступ ко всем. У нас более 20 учреждений, управляемых по одной и той же системе и растущих с каждым днем. Когда администратор получает доступ к системе, ему не нужно загружать весь файл js (6 МБ + в 'npm run prod'). Но так как у нас есть один файл js во всем проекте, пользователь с правами администратора должен загрузить весь файл 6MB + js. В режиме 'npm run watch' файл js составляет 13 МБ +! Как установить разные js для разных пользователей или иметь несколько js-файлов? Как ускорить работу моего приложения до конечного пользователя?

Просто пример файла блейда:

<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>

Я использую реквизиты для получения маршрутов в файле компонента.

Изменить

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

/**

* Первыймы загрузим все зависимости JavaScript этого проекта, включая * Vue и другие библиотеки. Это отличная отправная точка при * создании надежных и мощных веб-приложений с использованием Vue и 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

Вы можете извлечь базовую библиотеку инфраструктуры Vue, используя mix, а затем скомпилировать все компоненты, необходимые для конкретной страницы, в отдельный пакет, используя webpack

Например,

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

И иметь файлы JS, которыезарегистрировать компоненты Vue

institution.js

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

и скомпилировать в отдельный файл

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

, включить этот файл в конкретный блэйд-вид и т. д. и так далее для других сценариев и представлений

Надеюсь, это поможет