根本原因是压缩工具将lang、charset等关键meta标签误判为冗余属性而删除：lang因removeRedundantAttributes默认启用被删；charset若未置于head首行，会被视为无效meta剔除；viewport因content格式不标准亦可能被丢弃。
前端打包压缩导致 lang、charset、viewport 等关键可访问性与 SEO 相关的 <meta> 标签丢失，根本原因不是压缩本身“删了标签”，而是构建工具（如 Webpack/Vite）在 HTML 模板处理或压缩插件配置中，误将这些标签识别为“冗余”或“未使用”，进而移除。
为什么 html-minifier-terser 会删掉 lang 和 charset
默认配置下，html-minifier-terser（Vite/Webpack 常用 HTML 压缩器）启用 removeEmptyAttributes、collapseWhitespace、removeRedundantAttributes 等选项时，可能把 <html lang="zh-CN"> 中的 lang 视为“非必需属性”而删除；更危险的是，若 <meta charset="UTF-8"> 不在 <head> 最开头，它会被当成“可移除的 meta”直接干掉 —— 这直接触发浏览器乱码或解析失败。
-
lang属性被删：常见于 Vite 的vite-plugin-html或 Webpack 的html-webpack-plugin配置中未显式保留html标签属性 -
charset被删：多数因它没放在<head>第一行，压缩器认为“位置不合规”，直接剔除 -
viewport被删：较少见，但若写法不标准（如content="width=device-width, initial-scale=1"缺少空格或引号），某些压缩器会判定为无效并丢弃
Vite 项目中如何保留关键 meta 标签
Vite 默认使用 vite-plugin-html 处理 index.html，其压缩逻辑依赖 html-minifier-terser，但可通过配置绕过误删。
- 在
vite.config.ts中禁用自动压缩，改用安全保留策略：import { defineConfig } from 'vite'<br>import { injectHtml } from 'vite-plugin-html'然后在plugins中添加：injectHtml({<br> injectData: {},<br> minify: false // 关键：关闭内置压缩<br>}) - 若仍需压缩，显式传入安全配置：
minify: {<br> removeComments: true,<br> collapseWhitespace: true,<br> removeRedundantAttributes: false, // 禁用此选项，避免删 lang/charset<br> removeScriptTypeAttributes: false,<br> removeTagWhitespace: false,<br> minifyCSS: true,<br> minifyJS: true<br>} - 确保原始
index.html中<meta charset="UTF-8">是<head>内第一个标签 —— 这是浏览器解析前提，压缩器不会动它
Webpack + html-webpack-plugin 的修复方式
html-webpack-plugin 的 minify 选项若未定制，极易误删。必须显式控制保留逻辑：
立即学习“前端免费学习笔记（深入）”；
- 在
vue.config.js或webpack.config.js中，给HtmlWebpackPlugin的minify字段加入白名单：minify: {<br> removeComments: true,<br> collapseWhitespace: true,<br> // 显式保留关键属性<br> keepClosingSlash: true,<br> removeRedundantAttributes: false,<br> removeScriptTypeAttributes: false,<br> removeEmptyAttributes: false,<br> minifyCSS: true,<br> minifyJS: true<br>} - 检查
template指向的 HTML 文件是否含<html lang="zh-CN">—— 插件不会自动注入lang，必须手写 - 避免使用
html-webpack-plugin的inject: true自动注入 script/style 标签时覆盖整个<head>；改用templateParameters注入变量，保持结构可控
真正容易被忽略的点：压缩器本身不区分“语义标签”和“装饰标签”，它只按规则删。所以 lang 不是“默认保留项”，charset 不是“永远安全”。你得亲手告诉它——哪些标签，一个字都不能动。
