<p class="image-package"><img class="uploaded-img" src="https://upload-images.jianshu.io/upload_images/3895637-4ae8370826017e94.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="auto" height="auto"/></p><p><strong>前言</strong></p><p><strong>tailwindcss</strong> 是一个原子类优先的css框架，现如今非常的流行。它语义化的 <strong>类名</strong> 能够让前端开发人员<strong>直观</strong>地对元素的样式进行编写和维护。</p><p>然而这种直观性，有时候也会带来一定的困扰。有时候我们不想让用户或者外界的开发人员也能直观的观测到所有元素的样式，</p><p>比如我们访问 <a>https://tailwindcss.com</a> , 然后打开开发者工具，检查元素。瞬间，页面上那些元素的排版和样式都能猜测出来，甚至都不需要看右边的 <strong>style</strong> 面板。</p><p>所以，出于让其他人在生产环境中无法直观的看出一个元素的样式，我们就需要对 <strong>tailwindcss</strong> 生成的原子类进行混淆。</p><p><strong>方案的寻找</strong></p><p>起初我在网络上寻找解决方案时，我找到了 <strong>mangle-css-class-webpack-plugin</strong>，这是一个 <strong>webpack</strong> 插件，专门用来压缩和混淆在 <strong>html</strong>,<strong>js</strong>,<strong>css</strong> 里的类名。</p><p>然而我在尝试使用它去混淆 <strong>tailwindcss</strong> 的类名的时候遇到了困难，一开始我无法准确的传入 <strong>classNameRegExp</strong> 和其他的参数，这导致我 <strong>webpack build</strong> 之后的结果，要不就完全是错的，要不就完全达不到预期，后来找了一些 <strong>issue</strong> 看似解决了这个问题，但是可维护性极差。</p><p>另外直接通过正则去修改 <strong>js</strong> 里的字面量的方式，很容易造成小范围误伤，导致整个项目运行不起来报错。</p><p>于是我开始思考，有没有什么方式能够精准的实现混淆 <strong>tailwindcss</strong> 的类名，以下是我的解决方案。</p><p><strong>如何实现混淆</strong></p><p>首先为了更加精确的进行匹配，我决定从以下角度去实现</p><ol><li><p>为了精确找到 <strong>tailwindcss</strong> 生成了多少的类，我需要在运行时，得到 <strong>tailwindcss</strong> 的上下文。</p></li><li><p>放弃正则匹配，全面使用AST,即使用 <strong>prase5</strong> 来解析转化 <strong>html</strong> ,使用 <strong>babel</strong> 来解析转化 <strong>js</strong>,使用 <strong>postcss</strong> 来解析转化 <strong>css</strong></p></li></ol><p>为了达到第一点，我设计编写了一个npm包: <a>tailwindcss-patch</a> 使用它来获取到所有生成的 <strong>class</strong> 集合。</p><p>为了达到第二点，我编写了一个<strong>unplugin</strong>插件: <a>unplugin-tailwindcss-mangle</a>, 这是一个 <strong>webpack/vite</strong> 插件，用来在打包的时候，修改<strong>html</strong>,<strong>js</strong>,<strong>css</strong>混淆所有的类名。</p><p><strong>如何使用</strong></p><p>那么如何使用它们呢？很简单只要以下几步:</p><p><strong>1. 安装这2个包</strong></p><pre><npm|yarn|pnpm> i -D unplugin-tailwindcss-mangle tailwindcss-patch</pre><p><strong>2. 执行一下脚本</strong></p><pre>npx tw-patch</pre><p><strong>3. 添加 </strong></p><pre>  "scripts": {
    "prepare": "tw-patch"
  },</pre><p><strong>4. 注册这个插件</strong></p><p>这里以 <strong>webpack</strong> 和 <strong>vite</strong> 为例</p><p><strong>webpack</strong></p><pre>// esmimport { webpackPlugin as utwm } from 'unplugin-tailwindcss-mangle'// or cjsconst { 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</pre><p>这里我以 <strong>nextjs</strong> 为例，当然 <strong>vue.config.js</strong> 那些也都是类似的，把 <strong>utwm()</strong> 注册进 <strong>webpack</strong> 然后打包构建，预览即可看到效果。</p><p><strong>vite</strong></p><pre>// for example: vue vite projectimport { 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()]})</pre><p>然后执行脚本：</p><pre># generate bundle<npm|yarn|pnpm> run build# preview<npm|yarn|pnpm> run preview</pre><p><strong>效果预览</strong></p><pre><div class="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex"></div><div class="tw-g tw-h tw-i tw-d tw-e tw-j tw-k tw-l"></div></pre><p>当然，你也可以自定义生成的类名，查看<a>文档</a>获取更多的配置项。</p><p><strong>核心原理</strong></p><p>上面简单的介绍了一下使用方式，下面才是正文，当然只是用就没必要看这一段了。</p><p>思路上，首先我们仿照 <strong>tailwindcss</strong> 的文件提取方式，先从源文件(<strong>content</strong> 配置的 <strong>glob</strong> 表达式 覆盖到的文件)，比如 <strong>html</strong>,<strong>js</strong>,<strong>ts</strong>,<strong>jsx</strong>,<strong>tsx</strong>,<strong>vue</strong>,<strong>svelte</strong>...这类的文件中，读取内容生成 <strong>class</strong>,然后，利用 <strong>html ast</strong> 和 <strong>babel ast</strong> 转义，把转义结果保存起来，最后交给 <strong>postcss</strong> 对所有的 <strong>css</strong> 选择器进行转义。</p><p>一图以蔽之：</p><p class="image-package"><img class="uploaded-img" src="https://upload-images.jianshu.io/upload_images/3895637-373f93cf745f6cdf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" width="auto" height="auto"/></p><p>当然有些聪明的小伙伴，可能会产生疑问，为什么图上的 <strong>css</strong> 被处理了 <strong>2</strong> 次呢？</p><p>因为 <strong>css</strong> 有可能是变成一段 <strong>inline</strong> 的 <strong>js</strong>，这种情况下，没有 <strong>css</strong> 文件产生，只有一个 <strong>js</strong> 块，里面包含着样式内容，这时候使用插入 <strong>loader</strong> 的方案可以解决。而最后获取生成器内的<strong>map</strong>进行转化和比较，算是一道双保险。</p><p><strong>SSR 场景思考和解决方案</strong></p><p>然而上述方案还有一些缺陷，尤其是在 <strong>ssr</strong> 场景下</p><p>我们都知道 <strong>react</strong>/<strong>vue</strong> <strong>ssr</strong> 模式下面会打 <strong>2</strong>类包，一类是服务端，一类是客户端的。</p><p>这意味着我们在运行构建任务时，我们的插件会被跑 <strong>2</strong> 次。</p><p>然而这里面存在一个严重的问题，我们能得到 <strong>tailwindcss</strong> 上下文的时机，是在客户端的 <strong>postcss</strong> 被触发后，然而服务端打包时，并不会触发 <strong>postcss</strong> 的处理。假如 <strong>server</strong> 的包，在 <strong>client</strong> 的包之前打好了，这时候运行项目。由于 <strong>clinet</strong> 包被混淆了，<strong>server</strong>包没有被混淆，这时候就会出现 <strong>2</strong>边的<strong>dom</strong> 属性不对等的问题，从而造成客户端水合激活报错。遇到这种情况，我们应该怎么办呢？</p><p>实际上很简单，既然插件在同一个 <strong>nodejs</strong> 进程里，被运行了 <strong>2</strong> 次，那么我们大可创建一块缓存区域，当发现 <strong>server</strong> 端的打包先被激活的时候，我们就缓存住它的运行结果，就是那些 <strong>Webpack Source</strong> 或者 <strong>Vite Chunk/Asset</strong> 对象。等到客户端获取上下文，处理好了之后，再把它们去取出来，使用上下文对 <strong>server bundle</strong> 进行处理混淆，然后再对之前 <strong>server</strong> 已经输出的结果进行覆写，这样不就可以了吗？</p><p>所以这个方案，我用在了 <strong>nextjs</strong>/<strong>nuxtjs</strong> 里。</p><p><strong>错误与反馈</strong></p><p>如果你在使用过程中，遇到了问题或者疑问，或者想进行交流，欢迎提 <a>issue</a> 给我.</p><p>
</p>