最近做的网页我都是用Taiwindcss来搞的，因为编辑起来很方便，不需要html和css来回去切换，直接编辑一个文件即可。无论是修改还是调整都很快捷。但是类名有的时候过长了，所以就找了个插件来压缩、混淆类名，来节省空间。

混淆只在build阶段有效，dev还是普通类名，不影响。

安装插件

执行

1
npm add -D tailwindcss-patch

执行

1
npx tw-patch install

执行

1
npm i -D unplugin-tailwindcss-mangle tailwindcss-patch

执行

1
npx tw-patch

添加script

在package.json的 “scripts”中添加

1
2
3
"scripts": {
  "prepare": "tw-patch"
},

注册插件

我的项目是react+vite

修改vite.config.ts。

在预览时都混淆类名

1
2
3
4
5
6
7
8
9
10
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import utwm from 'unplugin-tailwindcss-mangle/vite'

// https://vite.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),utwm()
  ],
}))

实现只在部署时混淆类名。

1
2
3
4
5
6
7
8
9
10
11
12
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import utwm from 'unplugin-tailwindcss-mangle/vite'

// https://vite.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    ...(mode === 'production' ? [utwm()] : [])
  ],
}))

打包

执行Build之前执行

1
npx tw-patch extract

然后再执行build

1
npm run build

大功告成

现在你的网页就就使用tw-开头的类名了。

类名

效果预览：https://zhheo.com/

自定义模板

如果你觉得tw-开头不是很酷，你也可以自定义开头。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import utwm from 'unplugin-tailwindcss-mangle/vite'

// https://vite.dev/config/
export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    ...(mode === 'production' ? [utwm({ classGenerator:{
      classPrefix:'heo-'
    } })] : [])
  ],
}))

这个为heo-开头

效果

如果你需要随机混淆

如果你需要更加严格的随机混淆，可以自定义生成器。例如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import utwm from 'unplugin-tailwindcss-mangle/vite'

// 在函数外部声明 Set
const generatedClasses = new Set<string>()

// 自定义生成函数
function customGenerate(opts: any) {
  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789'
  let rand = ''
  let className = ''
  const prefix = opts.classPrefix || 'heo-'
  do {
    rand = ''
    for (let i = 0; i < 6; i++) {
      rand += chars[Math.floor(Math.random() * chars.length)]
    }
    className = `${prefix}${rand}`
  } while (generatedClasses.has(className))
  generatedClasses.add(className)
  return className
}

export default defineConfig(({ mode }) => ({
  plugins: [
    react(),
    ...(mode === 'production'
      ? [
          utwm({
            classGenerator: {
              classPrefix: 'heo-',
              customGenerate: customGenerate
            }
          })
        ]
      : [])
  ],
}))

实现效果

其他项目

其他项目可以参考掘金上的这个教程。

webpack

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// esm
import { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'
// or cjs
const { webpackPlugin: utwm } = require('unplugin-tailwindcss-mangle')
// use this webpack plugin
// for example next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    config.plugins.push(utwm())
    return config
  }
}

module.exports = nextConfig

vue

1
2
3
4
5
6
7
8
// for example: vue vite project
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { vitePlugin as utwm } from 'unplugin-tailwindcss-mangle'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), utwm()]
})