减少 Vuetify 的包大小

问题描述

我使用 Vue 2.6.12 + Vuetify 2.4.2 和 Webpack 4.46.0

项目结构：
/dist
/media - 这里是 .png 和其他媒体
/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 配置：

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(),}

运行 webpack 后，Vuetify 从包文件中占用了太多的大小：1.5 MB 惩罚包大小

在我的情况下如何减少 Vuetify 的包大小？

解决方法

您可以使用 Vuetify 的“摇树”选项。它可以大大降低您的构建大小。

与您分享一个链接，您可以在其中找到有关它的更多信息： https://vuetifyjs.com/en/features/treeshaking/

祝你好运！