如何用GitHub Actions实现静态站点CSS清理、代码压缩及资源内联？

所需依赖工具 #

不需要使用复杂的全链路打包工具，组合三个轻量NPM包即可覆盖所有需求：

• purgecss：扫描HTML、JS文件内容，精准清除CSS中未使用的选择器、冗余代码
• inline-source：将HTML中外部引用的CSS、JS文件直接内联到对应HTML文件的对应位置
• html-minifier-terser：同时压缩HTML、内联后的CSS、JS代码，支持去除冗余注释、空白字符、无用属性等

第一步：项目本地配置 #

首先在项目根目录创建package.json，添加如下配置：

{
  "name": "static-site-optimize",
  "scripts": {
    "build": "npm run purgecss && npm run inline && npm run minify",
    "purgecss": "purgecss --css ./src/*.css --content ./src/*.html ./src/*.js --output ./temp/css/",
    "inline": "inline-source --root ./temp ./src/*.html --output ./temp/",
    "minify": "html-minifier-terser ./temp/*.html --collapse-whitespace --remove-comments --minify-css true --minify-js true --output-dir ./dist/"
  },
  "devDependencies": {
    "purgecss": "^5.0.0",
    "inline-source-cli": "^2.0.0",
    "html-minifier-terser": "^7.2.0"
  }
}

可根据你实际的源码存放路径调整匹配规则，比如源码直接放在根目录就把所有./src/替换为./即可

如果你页面中有JS动态生成的CSS类名，可在purgecss命令中添加--safelist 类名1 类名2参数，避免这些实际用到的类被误删。

第二步：GitHub Action 配置 #

在项目根目录创建.github/workflows/optimize.yml文件，内容如下：

name: 静态站资源优化
on: [push]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: 拉取代码
        uses: actions/checkout@v4

      - name: 安装Node.js环境
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: 安装依赖
        run: npm ci

      - name: 执行资源优化
        run: npm run build

      - name: 上传优化后产物
        uses: actions/upload-artifact@v4
        with:
          name: optimized-site
          path: ./dist

部署平台配置调整 #

• Netlify：将站点的构建命令设为npm run build，发布目录设置为dist即可
• Cloudflare Pages：同样将构建命令设为npm run build，输出目录设置为dist即可

内容的提问来源于stack exchange，提问作者Mike P.