Laravel 和 Vue：在 Vuetify 中添加时如何减小包大小？

Question

我正在将 Vue 与现有的 Laravel 设置一起使用。当我运行时npm run production，包大小相当大，为 1.1MB。只有几个组件，我相信是 Vuetify 占据了这个大小。
我过去曾将 Vue 与 Laravel 一起使用，并且组件比这多得多，而且捆绑包只有 300KB，所以我认为罪魁祸首一定是 Vuetify。
有没有办法在不摆脱 Vuetify 的情况下进一步减少这种情况？我webpack.mix.js也复制了我的文件。这里是否有我错过的可以减少捆绑包大小的优化？

main.js

window.axios = require('axios');
import Vue from 'vue';
import Vuex from 'vuex';
import store from './store/store';


import Vuetify from 'vuetify';
import 'vuetify/dist/vuetify.min.css';
import ReferralSetup from './components/admin/ReferralSetup';
import ReferralStats from './components/admin/ReferralStats';
import ReferralInstructional from './components/admin/ReferralInstructional';
import BoxSection from './components/admin/BoxSection';

Vue.use(Vuetify);

Vue.component('referral-setup', ReferralSetup);
Vue.component('referral-stats', ReferralStats);
Vue.component('referral-instructional', ReferralInstructional);
Vue.component('box-section', BoxSection);

webpack.mix.js

let mix             = require('laravel-mix');
let VueLoaderPlugin = require('vue-loader/lib/plugin')

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

mix .js('resources/assets/js/app.js', 'dist/js')


mix.options({
  extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
  purifyCss: true // Remove unused CSS selectors.
});

Answer 1

您是否考虑过将供应商文件提取到单独的文件中？这将允许您在供应商文件上设置较长的缓存时间，并减少应用程序更新的下载量。

供应商提取
https://laravel.com/docs/6.x/mix#vendor-extraction

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    .extract(['vue','vuetify','...'])

布局.blade.php

...

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

Bundle Analyzer如果您确实想了解问题出在哪里，
可以查看Laravel Mix Bundle Analyzer 。

Lodash
另外，您可能会考虑只加载您需要的 lodash 模块，因为它历来包含在 Laravel 的 bootstrap.js 文件中。

import debounce from 'lodash/debounce';

window._ = { debounce };