I currently have over 100 components that are utilized in various Laravel blade files.
My system is service-based, allowing different types of users to access different routes. For example, there are administrator panels for us, admin panels for institutions, employee panels, student panels, guardian panels, and more.
As an administrator, we have access to all panels. We manage over 20 institutions within the same system, with that number increasing every day.
When an admin accesses the system, there is no need to load the entire js file (which is over 6MB+ when running 'npm run prod'). However, since we have only one js file in the entire project, the admin user must load the entire 6MB+ js file. In 'npm run watch' mode, the js file size increases to over 13 MB!
How can I set up different js files for different users or use multiple js files?
What measures can be taken to optimize my app for end-users' faster access?
Here's an example of a blade file structure:
<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 utilize props to obtain the routes in the component files.
Edit
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').extract();
https://i.sstatic.net/rT7Ql.jpg
https://i.sstatic.net/BC9tw.jpg
/**
- We will first load all JavaScript dependencies for this project, including Vue and other libraries. This serves as a solid foundation for building robust web applications using Vue and Laravel.
//require('./bootstrap');
import Vue from "vue";
window.Vue = Vue;
...
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));
}
});