带有 laravel mix 的 vuejs 的大 app.js 文件大小（13 MB）

Question

我在 larvel 5.8 中使用带有刀片文件的 vuejs。意味着我没有使用 vue 路由器，而是使用 laravel 视图。 最近我面临一个大问题，我的 public/js/app.js 文件大小约为 13 MB！ 当我部署到 live 时，用户在登录时面临缓慢！ 我什至无法分析，因为我没有看到任何名为 webpack.config shown here

的配置文件

我的 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：我所有的组件都在这里注入（提到 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

Webpack.mix.js

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

我的 package.json 文件

编辑

Answer 1

• 请注意，这是开发版本，生产版本的大小会小得多，而且您的用户必须下载并运行它

npm run prod

• 您可以将供应商资产提取到一个单独的文件中，该文件将被缓存更长时间

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

来自Laravel Mix Docs

• 您可能还想为 Visual Studio Code 安装 Import Cost 扩展，因为它会显示您导入或需要的每个 ES6 模块的大小

您可以指示 Webpack 编译页面特定的 javascript 和 vue 组件，以便您可以将它们单独包含在刀片视图中，请参阅 this answer

Answer 2

请阅读关于 Vue.js 应用性能优化的系列文章，这对我了解延迟加载、缩小大小和减少应用的加载时间确实帮助很大。

1. Lazy loading and code splitting in Vue.js
2. Vue.js Router Performance
3. Lazy Loading Individual Vue Components and Prefetching

主要内容：

• 性能优化和延迟加载简介。
• 延迟加载路由和供应商捆绑反模式。
• 延迟加载 Vuex 模块
• 提供良好的等待体验和延迟加载单个组件
• 延迟加载库并找到较小的等效项
• UI 库的性能友好使用
• 使用 Service Worker 缓存
• 预取
• ...