Question

我正在使用带有现有Laravel设置的Vue。当我运行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','...'])

layout.blade.php

...

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

捆绑分析器
如果您确实想查看问题出在哪里，可以查看Laravel Mix Bundle Analyzer。

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

import debounce from 'lodash/debounce';

window._ = { debounce };

Answer 2

我们正在使用Vuetify 1.5.x

import Vuetify from 'vuetify';

指向〜/ node_modules / vuetify / dist / vuetify.js（1.1MB）

所以我选择了

import Vuetify from 'vuetify.min.js';

指向〜/ node_modules / vuetify / dist / vuetify.min.js（大小334Kb）

这几乎帮助我减小了捆的大小。

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

2 个答案: