javascript - Large Production Build File Size in Laravel 6 (Mix) with Vue.js 2 - Stack Overflow

admin管理员组

文章数量:1122832

I'm using Laravel 6 (Mix) and Vue.js 2 for my project. When I run the yarn prod command on the server, it generates a large production file, which significantly increases the load time of the website.

I've also added extract in my webpack.mix.js configuration to separate vendor files, but the file size issue persists.

The sizes of the generated files are:

/v2/js/vendor.js?id=4b6042a699ca621c856y - 1.9 MiB (27%)
/v2/js/app.js?id=0892f4497fbbbad7bbg4 - 652.2 KiB (9%)

Additionally, analysis tools show that nearly 50% of the content in these files is unused.

Here's my webpack.mix.js file:

require('laravel-mix-svg-vue');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');

mix.js("resources/v2/js/app.js", "public/v2/js").vue().svgVue({
    svgPath: 'resources/v2/assets/svg',
    extract: false,
    svgoSettings: [{ removeTitle: true }, { removeViewBox: false }, { removeDimensions: true }]
})
    .extract([
        'vue', 'vuex', 'vee-validate', 'lodash',
        'vuetify', 'feather-icons', 'dayjs',
        'tailwindcss', 'masonry-layout',
        'swiper', 'mapbox-gl', 'vue-awesome-swiper', '@mapbox/mapbox-gl-draw'
    ])
    .copyDirectory("resources/v2/assets/images", "public/v2/assets/images")
    .copyDirectory("resources/v2/assets/svg", "public/v2/assets/svg")
    .copyDirectory("resources/v2/assets/fonts", "public/v2/assets/fonts")
    .postCss("resources/v2/css/materialdesignicons.min.css", "public/v2/css")
    .postCss("resources/v2/css/app.css", "public/v2/css", [require('tailwindcss')])
    .webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin()
        ]
    });

mix.webpackConfig({
    output: {
        chunkFilename: '[name].js?id=[contenthash]',
    },
});

if (mix.inProduction()) {
    mix.version();

    const ASSET_URL = process.env.ASSET_URL + "/";

    mix.webpackConfig(webpack => {
        return {
            plugins: [new webpack.DefinePlugin({
                "process.env.ASSET_PATH": JSON.stringify(ASSET_URL)
            })], output: {
                publicPath: ASSET_URL
            }
        };
    });
}

How can I reduce the size of the production build file and optimize the loading time of my website? Any suggestions or improvements for my webpack.mix.js configuration are greatly appreciated!

本文标签： javascriptLarge Production Build File Size in Laravel 6 (Mix) with Vuejs 2Stack Overflow