Laravel 10 + Vite + Vue 环境下如何减少未使用CSS？

• 启用Vite CSS代码分割与UI库按需导入
  先在vite.config.js里开启CSS代码分割，同时如果用了Element Plus、Ant Design Vue这类UI库，搭配unplugin-auto-import和unplugin-vue-components实现组件及样式的按需导入，避免打包整个库的冗余样式。

  示例配置：

  import { defineConfig } from 'vite';
  import laravel from 'laravel-vite-plugin';
  import vue from '@vitejs/plugin-vue';
  import AutoImport from 'unplugin-auto-import/vite';
  import Components from 'unplugin-vue-components/vite';
  import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
  
  export default defineConfig({
    plugins: [
      laravel({
        input: 'resources/js/app.js',
        refresh: true,
      }),
      vue({
        template: {
          transformAssetUrls: {
            base: null,
            includeAbsolute: false,
          },
        },
      }),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    css: {
      codeSplit: true,
    },
  });
  

• 用PurgeCSS清理冗余样式
  通过PostCSS集成PurgeCSS，让它扫描你的Vue组件和Blade模板，自动移除未被使用的CSS。在项目根目录创建postcss.config.js，配置如下：

  module.exports = {
    plugins: [
      require('postcss-import'),
      require('tailwindcss'),
      require('autoprefixer'),
      process.env.NODE_ENV === 'production' ? require('@fullhuman/postcss-purgecss')({
        content: [
          './resources/views/**/*.blade.php',
          './resources/js/**/*.vue',
          './resources/js/**/*.js',
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: {
          standard: [/vue-.*/, /router-link-.*/], // 保留Vue核心样式类
          deep: [/动态生成的类名规则/], // 有动态类的话手动加白名单
        },
      }) : null,
    ].filter(Boolean),
  };
  

  注意只在生产环境启用，防止开发时样式丢失。

• 精简全局CSS导入
  别直接导入完整的CSS库（比如全量Bootstrap），改成按需导入需要的组件样式：

  /* 只导入需要的Bootstrap模块 */
  @import "bootstrap/scss/functions";
  @import "bootstrap/scss/variables";
  @import "bootstrap/scss/buttons";
  @import "bootstrap/scss/cards";
  

• 优化Vue组件样式
  给Vue单文件组件的样式加上scoped属性，既避免样式污染，也能让PurgeCSS更精准识别使用的样式：

  <template>
    <div class="user-profile-card"></div>
  </template>
  
  <style scoped>
  .user-profile-card {
    padding: 1rem;
    border-radius: 8px;
  }
  </style>
  

  定期清理组件里没用的样式代码。

• 验证优化效果
  运行npm run build生成生产包，再用Google PageSpeed Insights重新检测，或者用浏览器DevTools的Coverage面板查看未使用CSS占比，确认问题是否改善。

内容的提问来源于stack exchange，提问作者Sdafs Fasafs