使用laravel mix的VUEJ的大app.js文件大小(13 MB)
我在larvel 5.8中将vuejs与刀片文件一起使用。表示我使用的不是vue路由器,而是laravel视图。 最近我面临一个大问题,我的public/js/app.js文件大小约为13MB!! 当我部署到live时,用户在登录时会面临速度缓慢的问题! 我甚至无法分析,因为我没有看到任何名为webpack.config的配置文件 我的app.js: N> B:我所有的成分都是在这里注射的,只是为了精确 刀片文件: mypackage.json文件 编辑 请注意,这是开发版本,生产版本的大小要小得多,用户必须下载并运行它 您可以将供应商资产提取到一个单独的文件中,该文件将被缓存更长时间 从 您可能还需要安装Visual Studio代码扩展,因为它将显示您导入或需要的每个ES6模块的大小 您可以指示Webpack编译特定于页面的javascript和vue组件,以便在blade视图中分别包含它们,请参阅 请注意,这是开发版本,生产版本的大小要小得多,用户必须下载并运行它 您可以将供应商资产提取到一个单独的文件中,该文件将被缓存更长时间 从 您可能还需要安装Visual Studio代码扩展,因为它将显示您导入或需要的每个ES6模块的大小使用laravel mix的VUEJ的大app.js文件大小(13 MB),laravel,vue.js,webpack,Laravel,Vue.js,Webpack,我在larvel 5.8中将vuejs与刀片文件一起使用。表示我使用的不是vue路由器,而是laravel视图。 最近我面临一个大问题,我的public/js/app.js文件大小约为13MB!! 当我部署到live时,用户在登录时会面临速度缓慢的问题! 我甚至无法分析,因为我没有看到任何名为webpack.config的配置文件 我的app.js: N> B:我所有的成分都是在这里注射的,只是为了精确 刀片文件: mypackage.json文件 编辑 请注意,这是开发版本,生产版本的大小要小
你可以指导Webpack编译页面特定的JavaScript和VUE组件,这样你就可以在刀片视图中单独包含它们,请参阅
< P>。请考虑这一系列关于VUE.JS应用程序性能优化的文章,这在理解懒惰加载方面确实帮助了我很多。缩小我的应用程序的大小并缩短加载时间 主要内容: 介绍性能优化和延迟加载。 延迟加载路由和供应商包反模式。 延迟加载Vuex模块 提供良好的等待体验和延迟加载单个组件 延迟加载lib并查找较小的等价项 UI库的性能友好使用 利用服务工作者缓存 预取 ...请考虑这一系列关于VUE.JS应用程序性能优化的文章,这对我理解懒惰加载、缩小大小和减少应用程序的加载时间确实有很大帮助。
主要内容: 介绍性能优化和延迟加载。 延迟加载路由和供应商包反模式。 延迟加载Vuex模块 提供良好的等待体验和延迟加载单个组件 延迟加载lib并查找较小的等价项 UI库的性能友好使用 利用服务工作者缓存 预取 ...添加插件并确定是什么让它这么大。现在安装它,如图片开发部分所示。但是我怎么才能看到它的输出呢?我可以在哪里编写配置代码,因为我没有看到任何与webpack配置相关的文件,但是webpack.mix.js@ohgod为什么看起来这样做可以帮你完成为什么我不能使用webpack analyzer?我应该使用默认网页包而不是laravel mix,还是必须使用laravel?你可以。你可以在你的webpack.mix.js文件中使用mix.webpackConfig{plugins:[new BundleAnalyzer]}。添加插件并确定是什么让它如此庞大。现在安装它,如图片开发部分所示。但是我怎么才能看到它的输出呢?我可以在哪里编写配置代码,因为我没有看到任何与webpack配置相关的文件,但是webpack.mix.js@ohgod为什么看起来这样做可以帮你完成为什么我不能使用webpack analyzer?我应该使用默认网页包而不是laravel mix,还是必须使用laravel?你可以。你可以在你的webpack.mix.js文件中使用mix.webpackConfig{plugins:[new BundleAnalyzer]}。分开的文件有什么好处?因为所有文件都将在第一次访问时加载@CaddyVendor文件将被缓存,因此当您更改一些Javascript代码时,用户将不必再次下载VueJ和其他供应商资产,因为他们已经在浏览器上缓存了VueJ和其他供应商资产,因此它将变得更快速,您真的在每个页面上使用每个组件吗?是的,由于我使用的是从控制器操作返回的刀片文件。@CADDY并且该刀片文件是您所有应用程序中唯一的一个刀片文件?分离的文件有什么好处?因为所有文件都将在第一次访问时加载@CaddyVendor文件将被缓存,因此当您更改一些Javascript代码时,用户将不必再次下载VueJ和其他供应商资产,因为他们已经在浏览器上缓存了VueJ和其他供应商资产,因此它将变得更快速,您真的在每个页面上使用每个组件吗?是的,因为我使用的是从控制器操作返回的刀片文件。@CADDY该刀片文件是所有应用程序中唯一的一个吗?
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));
}
});
@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
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
npm run prod
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.extract();