Reduce bundle size of Vuetify

Question

I am using Vue 2.6.12 + Vuetify 2.4.2 with Webpack 4.46.0

Project structure:
/dist
/media - here is .png and other media
/src
/src/plugins/vuetify.js
/src/penalty_frame.html
/src/penalty.js
vuetify.js:

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const opts = {}

export default new Vuetify(opts)

penalty.js

import Vue from 'vue'
import vuetify from './plugins/vuetify.js'

var app = new Vue({
    el: '#app_penalty',
    vuetify,
    ...
})

Webpack config:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
    entry: {
        penalty: path.resolve(__dirname, './src/penalty.js'),
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: ({ chunk: { name } }) => {
            return name === 'main' ? '[name].bundle.js': '[name].[contenthash].js';
        },
    },
    optimization: {
        minimize: false
    },
    module: {
        rules: [
            // CSS, PostCSS, Sass
            {
                test: /\.(scss|css|sass)$/,
                use: ['vue-style-loader', 'style-loader', 'css-loader', 'postcss-loader', 'sass-loader'],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                        },
                    },
                ],
            },

        ],
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' для webpack 1
        }
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, './src/penalty_frame.html'), // шаблон
            filename: 'penalty.html', // название выходного файла
            chunks : ['penalty']
        }),
        new CleanWebpackPlugin(),
        new BundleAnalyzerPlugin(),
    ],
}

After I run webpack, Vuetify takes too many size from bundle file: 1.5 MB penalty bundle size

How to reduce bundle size of Vuetify in my case?

Agustin Lombardo Agustin Lombardo · Accepted Answer · 2021-01-28T05:53:21

You can use the option of Vuetify "Treeshaking". It can drastically lowering your build size.

Share with you, a link where you can find more information about it: https://vuetifyjs.com/en/features/treeshaking/

Good luck!

Reduce bundle size of Vuetify

1 Answers