HTML5应用需通过Webpack/Vite打包压缩、手动精简文件、启用Gzip/Brotli服务端压缩及清除调试代码与未用资源来提升性能。
如果您已完成 HTML5 应用开发，但发现页面加载缓慢、资源体积过大或部署后出现脚本错乱，则可能是由于未对 HTML、CSS、JavaScript 等资源进行有效打包与压缩。以下是实现 HTML5 代码打包压缩与发布的具体操作步骤：
一、使用 Webpack 进行模块化打包与压缩
Webpack 可将多个 HTML、JS、CSS 文件整合为优化后的静态资源包，并通过内置插件自动完成代码压缩、Tree Shaking 和资源哈希命名。
1、在项目根目录执行 npm init -y 初始化 package.json。
2、运行 npm install --save-dev webpack webpack-cli html-webpack-plugin terser-webpack-plugin 安装核心依赖。
立即学习“前端免费学习笔记（深入）”；
3、创建 webpack.config.js，配置 entry 指向主 HTML 文件，output 设置 dist 输出路径，并启用 TerserPlugin 压缩 JS。
4、在 package.json 的 scripts 中添加 "build": "webpack --mode production"。
5、执行 npm run build，生成压缩后的静态文件至 dist 目录。
二、使用 Vite 构建并预设压缩策略
Vite 内置 Rollup 打包器，在构建阶段默认启用 esbuild 压缩 JS、CSS，并支持自动内联小资源、分割 chunk 以提升加载效率。
1、确保项目已通过 npm create vite@latest my-app -- --template html 创建。
2、进入项目目录后运行 npm install 安装依赖。
3、修改 vite.config.js，添加 build: { minify: 'esbuild', assetsInlineLimit: 4096 } 配置项。
4、执行 npm run build，Vite 将输出压缩后的 dist 文件夹，含 Gzip 友好格式的 JS/CSS。
三、手动压缩 HTML、CSS、JS 文件
适用于轻量级项目或无法引入构建工具的场景，通过命令行工具对单个文件进行无损压缩，去除空格、注释及冗余符号。
1、全局安装 html-minifier-terser：npm install -g html-minifier-terser。
2、执行 html-minifier-terser --collapse-whitespace --remove-comments --minify-js true --minify-css true index.html -o dist/index.html。
3、对 CSS 文件使用 clean-css-cli：npx clean-css-cli -o dist/style.min.css src/style.css。
4、对 JS 文件使用 terser：npx terser src/main.js -o dist/main.min.js --compress --mangle。
四、启用 Gzip 或 Brotli 服务端压缩
浏览器请求资源时，若服务器支持 Gzip/Brotli 编码，可将文本资源体积缩减 60%–80%，无需修改源码即可生效。
1、在 Nginx 配置中添加 gzip on; gzip_types text/plain text/css application/javascript image/svg+xml;。
2、若使用 Apache，启用 mod_deflate 并在 .htaccess 中写入 AddOutputFilterByType DEFLATE text/html text/css application/javascript。
3、对于现代服务器（如 Caddy），直接在 Caddyfile 中添加 encode zstd gzip 即可启用多级压缩。
4、验证是否生效：打开浏览器开发者工具 Network 标签页，检查响应头中是否存在 content-encoding: gzip 或 br。
五、移除调试代码与未使用资源
开发过程中遗留的 console.log、debugger 语句、未引用的 CSS 类、冗余字体文件或图标集，会显著增加包体积并影响加载性能。
1、运行 grep -r "console\.log\|debugger\|alert(" src/ --include="*.js" 查找调试残留。
2、使用 PurgeCSS 扫描 HTML 与 JS 引用关系，清除未使用的 CSS 规则：npx purgecss --css src/*.css --content src/*.html --output dist/。
3、检查 public/ 或 assets/ 目录，删除未被任何 HTML 或 JS import 的图片、字体、JSON 配置文件。
4、使用 npx source-map-explorer dist/*.js 分析 JS 包构成，识别体积异常的第三方模块。
