移动端 HTML 代码混淆后页面布局错乱怎么办？

兄弟你搞错方向了，HTML 根本没必要混淆，混淆了也没啥用，浏览器渲染还得靠它，F12 一看源码照样能读到。

你现在的问题就是典型的"改了 HTML 里的 class 名，但 CSS 里还用的是旧名字"，样式当然全挂。

直接说结论，HTML 不要混淆，只混淆 JS 就行。真想保护代码，JS 混淆 + CSS 类名混淆一起上，但得用工具自动同步。

如果你非要搞 HTML 类名混淆，得配合构建工具一起用，比如用 gulp-rename 或者 webpack 的插件，自动把 CSS 里的类名也替换掉。手动搞肯定炸。

给你一个 gulp 的简单示例，能自动同步 HTML 和 CSS 的类名：

const gulp = require('gulp');

const rename = require('gulp-rename');

const postcss = require('gulp-postcss');

const cssModules = require('postcss-modules');



// 用 postcss-modules 自动处理类名映射

gulp.task('obfuscate', () => {

  return gulp.src('src/*.css')

    .pipe(postcss([

      cssModules({

        generateScopedName: '_[hash:base64:5]'

      })

    ]))

    .pipe(gulp.dest('dist/'));

});

但说实话，移动端 H5 页面没必要折腾这个，混淆 JS 足够了，HTML 和 CSS 混淆带来的收益很低，反而容易出 bug。

你现在直接用原始 HTML 就行，别折腾混淆了。

你这个问题的根源在于混淆工具改了 HTML 里的 class 名，但没同步去改 CSS 文件里对应的选择器，两边对不上，样式自然就炸了。

先说结论：HTML 结构本身基本不需要混淆，也没必要混淆。真正需要混淆的是 JS 代码，HTML 顶多做压缩就行。

具体来说，混淆工具乱改 class 名是一个很危险的操作。因为 class 是 HTML 和 CSS 之间的"契约"，你单方面撕毁契约，CSS 那边肯定找不到人。你用在线工具单独处理 HTML 文件，它根本不知道你的 CSS 在哪、写了什么，所以只能瞎改。

正确的做法应该是这样的：

第一，HTML 只做压缩，不改动结构属性。压缩是去掉空格、换行、注释，减小体积，但不改变任何语义。class 名该叫 btn-primary 还是叫 btn-primary，一个字都不能动。

第二，JS 才是混淆的重点。变量名、函数名可以改成 a、b、_0x1234 这种无意义字符，逻辑流程可以打乱，字符串可以编码，这才是真正保护业务逻辑的手段。

第三，如果你真的想混淆 class 名（为了进一步压缩体积或增加逆向难度），必须用构建工具整体处理，让 HTML 和 CSS 同步变化。比如用 webpack 配合一些插件，在构建时统一生成短 class 名，HTML 和 CSS 同时替换。但这属于进阶操作，一般项目没必要折腾。

给你一个推荐的构建流程示例，用 gulp 来处理：

const gulp = require('gulp');

const htmlmin = require('gulp-htmlmin');

const terser = require('gulp-terser');

const cleanCSS = require('gulp-clean-css');



// HTML 只压缩，不混淆

gulp.task('html', () => {

  return gulp.src('src/*.html')

    .pipe(htmlmin({

      collapseWhitespace: true,    // 去掉空白

      removeComments: true,        // 去掉注释

      // 关键：不要改 class 名

      minifyCSS: false,

      minifyJS: false

    }))

    .pipe(gulp.dest('dist'));

});



// JS 进行混淆

gulp.task('js', () => {

  return gulp.src('src/*.js')

    .pipe(terser({

      mangle: true,          // 混淆变量名

      compress: true,        // 压缩逻辑

      output: { comments: false }

    }))

    .pipe(gulp.dest('dist'));

});



// CSS 只压缩

gulp.task('css', () => {

  return gulp.src('src/*.css')

    .pipe(cleanCSS())

    .pipe(gulp.dest('dist'));

});



gulp.task('default', gulp.parallel('html', 'js', 'css'));

如果你是纯静态页面，没有构建工具，那就更简单了。HTML 手动压缩一下就行，把换行和多余空格删掉，网上随便找个 HTML 压缩工具，记得勾选"保留属性名"之类的选项。JS 可以用 JavaScript Obfuscator 这种工具单独处理。

总结一下你的问题：混淆工具不该动 HTML 结构，你选的工具或者配置有问题。下次记住，HTML 压缩就行，JS 才需要真正意义上的混淆。class 名要改就得 HTML 和 CSS 一起改，单独改一个必定出事。

你现在这种情况，只能用原始代码重新来过，那个混淆后的 HTML 已经废了，改回去的成本比重写还高。