vuejs中捆綁和組件的單獨js文件

Question

假設我有 100 多個組件用於不同的 laravel 刀片文件。 我有一個基於服務的系統，不同類型的用戶可以訪問不同的路由。 假設我們的管理員面板，機構的管理員面板，員工面板，學生面板，監護人面板等。作為管理員，我們可以訪問所有面板。 我們有 20 多家機構由同一系統管理，並且日益增加。 當管理員訪問系統時，他不需要加載整個 js(6MB+ in 'npm run prod') 文件。 但是由於我們整個項目只有一個js文件，管理員用戶必須加載整個6MB+的js文件。 在“npm run watch”模式下，js 文件是 13 MB+？ 如何為不同的用戶設置不同的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 構建健壯、強大的 web 應用程序時，這是一個很好的起點。 */

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

您可以使用 mix 提取 Vue 框架核心庫，然后使用 webpack 將特定頁面所需的每個組件編譯到單獨的包中

例如

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

並擁有注冊 Vue 組件的 JS 文件

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

並將該文件包含在特定的刀片視圖中，等等其他腳本和視圖

希望這可以幫助