vite按需导入element-plus组件 css

import vue from '@vitejs/plugin-vue';
import styleImport from 'vite-plugin-style-import';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
import viteCompression from 'vite-plugin-compression';
import { resolve } from 'path';
export default defineConfig({
    base: './',
    plugins: [
        vue(),
        // 生产环境生成 .gz 文件
        viteCompression({
            verbose: true, // 是否在控制台输出压缩结果
            deleteOriginFile: false, // 	压缩后是否删除源文件
            threshold: 10240, // 如果体积大于阈值，它将被压缩，单位为b
            algorithm: 'gzip', //压缩算法
            ext: '.gz', // 生成的压缩包后缀
        }),
        //按需导入element-plus组件
        Components({
            resolvers: [ElementPlusResolver()],
        }),
        //按需导入element-plus的css样式
        styleImport({
            libs: [
                {
                    libraryName: 'element-plus',
                    esModule: true,
                    resolveStyle: name => {
                        return `element-plus/lib/theme-chalk/${name}.css`;
                    },
                },
            ],
        }),
    ],
    resolve: {
        alias: {
            '@': resolve(__dirname, 'src'),
            comp: resolve(__dirname, 'src/components'),
            '#': resolve(__dirname, 'types'),
        },
        // 忽略拓展名
        extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.scss'],
    },
    build: {
        target: 'es2015',
        outDir: 'dist',
        sourcemap: process.env.NODE_ENV === 'development' ? true : false,
        terserOptions: {
            compress: {
                keep_infinity: true,
                // 打包自动删除console
                drop_console: true,
                drop_debugger: true,
                // 对代码压缩的次数，默认是1，压缩次数越多，时间越长
                passes: 100,
            },
        },
        // 启用/禁用 brotli 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用它可能会提高大型项目的构建性能。
        brotliSize: false,
        // 块大小警告的限制（以 kbs 为单位）,默认： 500
        chunkSizeWarningLimit: 1200,
        rollupOptions: {
            output: {
                manualChunks(id) {
                    // 分包
                    if (id.includes('node_modules')) {
                        return id.toString().split('node_modules/')[1].split('/')[0].toString();
                    }
                },
            },
        },
    },
    css: {
        preprocessorOptions: {
            scss: {
                additionalData: `@import "./src/assets/scss/public.scss";`,
            },
        },
    },
});