.net 9 webapp, 如何对css进行 Tree-shaking(摇树优化），减小bootstrap.mini.css,javascript尺寸

0. 目的

1. 理解 Tree-shaking 的前提

• 模块化 CSS：使用 CSS 模块、PostCSS 或其他模块化 CSS 工具。
• 构建工具：如 Webpack、Vite 或 esbuild，用于静态分析和打包。
• PurgeCSS 或类似工具：专门用于移除未使用的 CSS。

2. 配置项目环境

1. 安装 Node.js 和 npm： 确保你的开发环境中已安装 Node.js（推荐版本 18 或以上）。
2. 初始化前端项目： 在你的 ASP.NET Core 项目根目录下，运行以下命令初始化一个前端项目：

   npm init -y
   npm install vite --save-dev

3. 创建 Vite 配置文件： 在项目根目录下创建 vite.config.js：

   import { defineConfig } from 'vite';
   //import postcss from 'vite-plugin-postcss';
   import fs from 'fs';
   import path from 'path';
   
   export default defineConfig({
     //plugins: [postcss()],
     base: './', // 设置基础路径为相对路径
     build: {
       outDir: 'dist', // 输出到 ASP.NET Core 的静态文件目录
       assetsDir: 'assets',
       manifest: true, // 添加这一行来生成 manifest.json
       minify: 'esbuild', // 使用 esbuild 进行压缩
       rollupOptions: {
         input: Object.fromEntries(
           fs.readdirSync('.')
             .filter(file => file.endsWith('.html'))
             .map(file => [path.parse(file).name, file])
         ),
       },
     },
   });

4. 安装 PostCSS 和 PurgeCSS： PurgeCSS 是实现 CSS Tree-shaking 的核心工具。运行以下命令：

   npm install --save-dev postcss @fullhuman/postcss-purgecss

3. 配置 PurgeCSS 进行 CSS Tree-shaking

3.1. 创建 PostCSS 配置文件

import purgecss from '@fullhuman/postcss-purgecss';

export default {
    plugins: [
        // 尝试 purgecss.default，如果不存在则回退到 purgecss
        // 这有助于处理 ESM/CJS 互操作可能导致的问题
        (purgecss.default || purgecss)({
            content: [
                './**/*.cshtml', // 扫描 Razor 视图
                './**/*.html', // 扫描 HTML 文件
                './*.html', // 扫描单个 HTML 文件
                './**/*.js', // 扫描 JavaScript 文件
                //'./**/*.ts', // 如果使用 TypeScript
                //'./**/*.razor', // 如果使用 Blazor
            ],
            defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
            safelist: ['html', 'body'], // 保留某些选择器
        }),
    ]
};

• content：指定需要扫描的文件路径，确保包含你的 Razor 视图（.cshtml）、Blazor 组件（.razor）等。
• defaultExtractor：定义如何提取 CSS 选择器。
• safelist：列出需要保留的 CSS 选择器，防止误删（如 html 和 body）。

3.2. 组织 CSS 文件

MyWebApp/
├── wwwroot/
│   ├── css/
│   │   └── app.css
├── Pages/
│   └── Index.cshtml
├── vite.config.js
├── postcss.config.js
├── package.json

/* app.css */
.container {
  background-color: #f0f0f0;
}
.unused-class {
  color: red;
}

<link rel="stylesheet" href="/css/app.css" />
<div class="container">
  <h1>Hello, World!</h1>
</div>

4. 构建和运行

4.1 添加构建脚本： 在 package.json 中添加以下脚本：

"scripts": {
  "build": "vite build",
  "dev": "vite"
}

最终的package.json文件：

{
  "name": "vite",
  "version": "1.0.0",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "build": "vite build",
    "dev": "vite"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^7.0.2",
    "vite": "^6.3.5"
  }
}

4.2 运行构建： 执行以下命令，Vite 会使用 PurgeCSS 分析并移除未使用的 CSS：

npm run build

4.3 获取.css路径

前面在vite.config.js中添加了manifest: true, 用于生成 .vite/manifest.json，类似如下内容

  "_BKTBlog.yYDNlSlB.css": {
    "file": "assets/BKTBlog.yYDNlSlB.css",
    "src": "_BKTBlog.yYDNlSlB.css"
  },

这里的 "assets/BKTBlog.yYDNlSlB.css" 是包含有hash值的css文件名，hash值每次编译都变化。

现在只要在编译后，获取到这个值，然后写入到siteconfig.xml, 这个文件记录了站点的配置信息，写入这个文件，就可以在.net 9 WebApp中获取到，应用到Layout中。

下面这个update-siteconfig.js，内容如下，就是完成css文件名获取，并写入到sitecofnig.xml中。

import fs from 'fs/promises';
import path from 'path';
import xml2js from 'xml2js';

async function updateSiteConfig() {
  // Vite 输出目录和 manifest 文件路径
  const manifestPath = path.resolve('dist', '.vite','manifest.json');
  // siteconfig.xml 文件路径
  const siteConfigPath = path.resolve('siteconfig.xml');

  try {
    // 1. 读取 manifest.json
    const manifestContent = await fs.readFile(manifestPath, 'utf-8');
    const manifest = JSON.parse(manifestContent);

    // 2. 查找目标 CSS 文件
    // 根据你的 vite.config.js, iconfont-razor.css 会被打包成 assets/BKTBlog.[hash].css
    // 我们将查找这个模式的文件
    let targetCssPath = null;
    for (const key in manifest) {
      const asset = manifest[key];
      // 检查 asset.file (主要输出文件)
      if (asset.file && typeof asset.file === 'string' &&
          asset.file.startsWith('assets/BKTBlog.') && asset.file.endsWith('.css')) {
        targetCssPath = asset.file;
        break;
      }
      // 检查 asset.css (如果 CSS 是通过 JS chunk 引入的)
      if (asset.css && Array.isArray(asset.css)) {
        for (const cssFile of asset.css) {
          if (typeof cssFile === 'string' && cssFile.startsWith('assets/BKTBlog.') && cssFile.endsWith('.css')) {
            targetCssPath = cssFile;
            break;
          }
        }
      }
      if (targetCssPath) break;
    }

    if (!targetCssPath) {
      console.error('错误：在 dist/manifest.json 中未找到目标 CSS 文件 (assets/BKTBlog.*.css)。');
      process.exit(1);
    }
    console.log(`找到目标 CSS: ${targetCssPath}`);

    // 3. 读取和解析 siteconfig.xml
    const siteConfigContent = await fs.readFile(siteConfigPath, 'utf-8');
    const parser = new xml2js.Parser();
    const builder = new xml2js.Builder({ xmldec: { 'version': '1.0', 'encoding': 'utf-8' } });
    const result = await parser.parseStringPromise(siteConfigContent);

    // 4. 更新 SiteMiniCss 的值
    if (result.SiteConfig && result.SiteConfig.SiteMiniCss && result.SiteConfig.SiteMiniCss[0] !== undefined) {
      result.SiteConfig.SiteMiniCss[0] = targetCssPath;
    } else {
      console.error('错误：在 siteconfig.xml 中未找到 SiteConfig.SiteMiniCss 元素。');
      process.exit(1);
    }

    // 5. 写回更新后的 XML 内容
    const updatedXml = builder.buildObject(result);
    await fs.writeFile(siteConfigPath, updatedXml, 'utf-8');
    console.log(`成功更新 ${siteConfigPath}，SiteMiniCss 设置为: ${targetCssPath}`);

  } catch (error) {
    console.error('更新 siteconfig.xml 时发生错误:', error);
    process.exit(1);
  }
}

updateSiteConfig();

package.json文件修改下，增加：&& node ./update-siteconfig.js

  "scripts": {
    "build": "vite build  && node ./update-siteconfig.js",
    "dev": "vite"
  },

这样执行npm run build构建后，就会自动将新的css文件名写入siteconfig.xml中。

在 ASP.NET Core 中引用构建结果： 修改 Index.cshtml 或布局文件（如 _Layout.cshtml），引用构建后的 CSS：

<link rel="stylesheet" href="@siteConfig.SiteMiniCss" />

5. 集成到 ASP.NET Core 构建流程

<Target Name="RunViteBuild" BeforeTargets="Build">
  <Exec Command="npm run build" WorkingDirectory="$(ProjectDir)" Condition="'$(Configuration)' == 'Release'" />
</Target>

npm run dev

<link rel="stylesheet" href="http://localhost:5173/css/app.css" />

6. 注意事项

• 动态类名：如果你的项目中使用动态生成的类名（如 Tailwind CSS 或 JavaScript 动态添加类），确保 PurgeCSS 能正确识别。可以调整 safelist 或使用 PurgeCSS 的 dynamicAttributes 选项。
• Blazor 特定问题：Blazor 组件的 CSS 隔离会生成特定的选择器（如 b-xxx），确保 PurgeCSS 配置文件中包含 .razor 文件，并测试 Tree-shaking 结果。
• 性能优化：对于大型项目，PurgeCSS 可能会增加构建时间。考虑在开发模式下禁用 PurgeCSS，仅在生产构建时启用：

  module.exports = {
    plugins: [
      process.env.NODE_ENV === 'production' ? require('@fullhuman/postcss-purgecss')(/* 配置 */) : null,
    ].filter(Boolean),
  };

7. 验证 Tree-shaking 效果

• 检查构建后的 CSS 文件大小是否显著减小。
• 使用浏览器的开发者工具（F12），检查是否有多余的 CSS 规则加载。
• 如果使用 Tailwind CSS，可以结合 Tailwind 的 JIT 模式和 PurgeCSS，进一步减少 CSS 体积。

示例：Tailwind CSS + PurgeCSS

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('@fullhuman/postcss-purgecss')({
      content: ['./**/*.cshtml', './**/*.razor', './**/*.html', './**/*.js'],
      defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
    }),
  ],
};

module.exports = {
  content: ['./**/*.cshtml', './**/*.razor', './**/*.html', './**/*.js'],
  theme: {
    extend: {},
  },
  plugins: [],
};

总结

1. 使用 Vite 或 Webpack 作为构建工具。
2. 集成 PurgeCSS，配置扫描路径和保留规则。
3. 将构建流程集成到 ASP.NET Core 项目中。
4. 测试和验证 Tree-shaking 效果。