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

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

安装插件

执行

1
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
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({
  plugins: [
    react(),
    utwm()
  ],
})

打包

执行Build之前执行

1
npx tw-patch extract

然后再执行build

1
npm run build

大功告成

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

类名

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

其他项目

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

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()]
})