减少 Vuetify 的包大小答案

【问题标题】：Reduce bundle size of Vuetify减少 Vuetify 的包大小
【发布时间】：2021-01-18 11:55:54
【问题描述】：

我正在使用 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 的包大小？

【问题讨论】：

标签： npm webpack vuetify.js bundling-and-minification

【解决方案1】：

您可以使用 Vuetify "Treeshaking" 选项。它可以大大降低您的构建大小。

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

祝你好运！

【讨论】：

这有助于将 vuetify 包的大小减少一半 :) 警告 - 您需要使用 sass 包而不是 node-sass