[英]Big app.js file size (13 MB) for vuejs with laravel mix
I am using vuejs with blade file in larvel 5.8.我在 larvel 5.8 中使用带有刀片文件的 vuejs。 Means i am not using vue router but laravel view.
意味着我没有使用 vue 路由器,而是使用 laravel 视图。 Recently i am facing a big problem that my public/js/app.js file size is about 13 MB,.
最近我面临一个大问题,我的 public/js/app.js 文件大小约为 13 MB。 When i deploye to live, user face slowness when login!
当我部署到 live 时,用户在登录时面临缓慢! I can't even alnalyze as i don't see any config file named webpack.config shown here
我什至无法分析,因为我没有看到此处显示的任何名为 webpack.config 的配置文件
My app.js:
我的 app.js:
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(
"employee-attendance-master-component",
require("./components/dashboard/site/latestAttendanceListComponent.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));
}
});
N>B: all my component are injected here (mentioned 2 only for precise) N>B:我所有的组件都在这里注入(提到 2 只是为了精确)
Blade File:
刀片文件:
@extends('default.admin.layouts.master')
@section('style')
{!! Html::style('css/styles.css') !!}
@endsection
@section('content')
<div class="container-fluid min_height_area">
<div class="row">
<div class="col-md-12">
<div class="view-header">
<section class="content-header">
<ol class="breadcrumb">
<li>
<span class="fa fa-dashboard" aria-hidden="true"></span>
<a href="{{route('admin')}}">{{ trans('translate.dashboard') }}</a></li>
<li class="active text-capitalize">{{ request()->route()->getName() }}</li>
</ol>
</section>
</div>
</div>
</div>
<employee-attendance-master-component
>
</employee-attendance-master-component>
</div>
@endsection
@section('hscripts')
<script>
window.routes = {
'attendance_list_by_shift_date': '{{ route('all-employee-attendance-list-by-shift-date') }}',
'route_attendance_get_shift_list': '{{ route('site-employee-get-shift-list-for-employee') }}',
'route_employee_attendance_edit': '{{ route('employee-attendance-edit') }}',
'route_take_access_time': '{{ route('employee-attendance-take-access-time') }}',
'route_log_by_date_and_username': '{{ route('edu-device-log-get-device-log-by-date-and-username') }}',
'route_send_sms': '{{ route('site-employee-attendance-send-sms') }}',
'route_report_date_shift': '{{ route('site-employee-attendance-report-date-and-shift') }}',
'route_open_pdf_file': '{{ route('open-pdf-file-storage',['']) }}',
'route_report_month_shift': '{{ route('site-employee-attendance-report-month-and-shift') }}',
'route_emp_list': '{{ route('site-employee-get-simple-active-list') }}',
'route_emp_yearly_report': '{{ route('site-employee-attendance-employee-wise-yearly-report') }}',
'route_site_year_list': '{{ route('get-all-type-academic-year-list') }}',
'route_user_list': '{{ route('site-user-get-site-user-by-user-type') }}',
'route_user_data_update': '{{ route('site-user-data-update',['']) }}',
}
</script>
@endsection
Webpack.mix.js
Webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
My package.json file
我的 package.json 文件
EDit编辑
npm run prod
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.extract();
From the Laravel Mix Docs来自Laravel 混合文档
And you can instruct Webpack
to compile pages specific javascript and vue components so you can include them separately on blade view, see this answer您可以指示
Webpack
编译页面特定的 javascript 和 vue 组件,以便您可以将它们分别包含在刀片视图中,请参阅此答案
Please consider this series of articles about Vue.js App Performance Optimization , that really helped me a lot, in understanding lazy-loading, shrinking the size and reducing the load time of my app.请考虑有关Vue.js 应用程序性能优化的系列文章,这对我理解延迟加载、缩小应用程序大小和减少应用程序的加载时间确实有很大帮助。
Main content:主要内容:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.